vue 中实现ip输入框

最新推荐文章于 2021-08-13 17:33:32 发布

Happytoknow

最新推荐文章于 2021-08-13 17:33:32 发布

阅读量2k

点赞数 2

文章标签： javascript vue web

本文链接：https://blog.csdn.net/Happytoknow/article/details/112556102

版权

本文介绍在Vue中实现IP地址输入框的方法，包括监听输入框事件及Backspace键处理，讨论了当前实现存在的问题，如删除内容时光标跳转，以及作者作为Java后端开发者在前端知识上的不足，期望得到前端高手的指导和优化建议。

摘要由CSDN通过智能技术生成

vue 中实现ip输入框

最近因工作需求，项目中需要输入ip，所以就想弄一个类型windows系统中的那种ip输入框，一开始也在网上找了现有的插件，但是只找到了jq的一个原生插件，他的ui又和项目不符，所以就想着用vue自己写一个，目前感觉功能方面基本都OK了。先上代码

首先是四个输入框

 <el-form-item label="IP地址">
            <el-input
              :clearable="false"
              v-model="ip1"
              id="ip1"
              ref="ip1"
              placeholder="0-255"
              size="small"
              style="width: 70px; text-align: right"
              onkeyup="this.value=this.value.replace(/\D/g,'')"
              maxlength="3"
            />
            <el-input
              :clearable="false"
              v-model="ip2"
              ref="ip2"
              placeholder="0-255"
              size="small"
              style="width: 70px"
              onkeyup="this.value=this.value.replace(/\D/g,'')"
              maxlength="3"
              @keyup.backspace.native="fallbackIn2"
            />
            <el-input
              :clearable="false"
              v-model="ip3"
              ref="ip3"
              placeholder="0-255"
              size="small"

最低0.47元/天解锁文章

Happytoknow

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
vue 中实现ip输入框

vue 中实现ip输入框最近因工作需求，项目中需要输入ip，所以就想弄一个类型windows系统中的那种ip输入框，一开始也在网上找了现有的插件，但是只找到了jq的一个原生插件，他的ui又和项目不符，所以就想着用vue自己写一个，目前感觉功能方面基本都OK了。先上代码首先是四个输入框 <el-form-item label="IP地址"> <el-input :clearable="false" v-mo
复制链接

扫一扫