基于vue+element的ip格式输入框组件

已于 2023-12-20 10:36:34 修改
阅读量653 收藏 8
点赞数 12
分类专栏： vue 文章标签： vue.js javascript elementui ip
于 2023-12-19 15:54:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangfan_357/article/details/135086543
版权

需求如下：
（1）输入.时，自动跳入下一输入框；
（2）按下backspace删除键，自动回退到上一输入框
（3）支持任意位置复制、粘贴ip

效果如下：
在这里插入图片描述
代码如下：
父组件：

<template>
    <div class="wrapperBox">
        <ip-input class="m-r10" v-model="ip_ariginal"></ip-input>
        <el-button @click="handleSearch" class="fillUpBtn-blue">搜索</el-button>
    </div>
</template>
<script>
import IpInput from "@/components/ip-input";
export default {
    components: { IpInput },
    data() {
        return {
            ip_ariginal:""
        }
    },
    mounted() {},
    methods: {
        //根据关键字搜索
        handleSearch() {
            let ip_ariginal = this.ip_ariginal;
            if(ip_ariginal!==""){
                let ipList = ip_ariginal.split('.');
                for (let index = 0; index < ipList.length; index++) {
                    if(ipList[index]==null || ipList[index]===""){
                        this.$message.error("请输入完整的IP地址！");
                        return false;
                    }
                }
            }
			
			//宝子们，后面的逻辑代码可根据自己的需求进行自定义补充哈
        }
    }
}
</script>
<style lang='less'></style>

子组件：

<template>
    <div>
        <div class="f-r a-c ipBox">
            <el-input 
            v-model.number="ip1"
            maxlength='3' ref='ip1'
            class="ipInput"
            @paste.native="handlePaste(1,$event)"
            @keyup.native="keyupEvent(1,$event)"
            @blur="submitIp"
            @input="(val) => handleInpIp(val,'ip1')"></el-input>
            <span class="dot">.</span>
            <el-input 
            v-model.number="ip2"
            maxlength='3' ref='ip2'
            class="ipInput"
            @paste.native="handlePaste(2,$event)"
            @keyup.native="keyupEvent(2,$event)"
            @blur="submitIp"
            @input="(val) => handleInpIp(val,'ip2')"></el-input>
            <span class="dot">.</span>
            <el-input 
            v-model.number="ip3"
            maxlength='3' ref='ip3'
            class="ipInput"
            @paste.native="handlePaste(3,$event)"
            @keyup.native="keyupEvent(3,$event)"
            @blur="submitIp"
            @input="(val) => handleInpIp(val,'ip3')"></el-input>
            <span class="dot">.</span>
            <el-input 
            v-model.number="ip4"
            maxlength='3' ref='ip4'
            class="ipInput"
            @paste.native="handlePaste(4,$event)"
            @keyup.native="keyupEvent(4,$event)"
            @blur="submitIp"
            @input="(val) => handleInpIp(val,'ip4')"></el-input>

            <i v-if="isShowDeleteBtn" class="closeBtn el-icon-circle-close m-r5" @click="clearValue"></i>
        </div>
    </div>
</template>
<script>
export default {
    name: "IpModel",
    model:{
        prop:"value",
        event:"change",
    },
    props:{
        value:String
    },
    data() {
        return {
            ip1: null,
            ip2: null,
            ip3: null,
            ip4: null,
            isShowDeleteBtn:false
        };
    },
    methods: {
        //利用复制粘贴的方式输入ip地址
        handlePaste(index, event) {
            const e = event || window.event
            let ipValue = e.clipboardData.getData('Text');

            if(ipValue!=null && ipValue!=undefined && ipValue!==""){
                let reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
                //IP地址格式不正确
                if(!reg.test(ipValue)){
                    this.$message.error("请输入正确的IP地址dsfdsf！");
                    setTimeout(() => {
                        this.ip1 = null;
                        this.ip2 = null;
                        this.ip3 = null;
                        this.ip4 = null;
                    }, 600)
                    if (index == 1) {
                        setTimeout(() => {
                            this.$refs.ip1.focus();
                        }, 100)
                    }
                    if (index == 2) {
                        setTimeout(() => {
                            this.$refs.ip2.focus();
                        }, 100)
                    }
                    if (index == 3) {
                        setTimeout(() => {
                            this.$refs.ip3.focus();
                        }, 100)
                    }
                    if (index == 4) {
                        setTimeout(() => {
                            this.$refs.ip4.focus();
                        }, 100)
                    }
                }
                else{
                    let ipList = ipValue.split('.');
                     setTimeout(() => {
                        this.ip1 = ipList[0];
                        this.ip2 = ipList[1];
                        this.ip3 = ipList[2];
                        this.ip4 = ipList[3];
                        this.$refs.ip4.focus();
                        this.isShowDeleteBtn = true;
                    }, 5)
                }
            }
        },

        //监听键盘（按下.键跳到下一个输入框，同理可做出其他按键的跳转输入框）
        keyupEvent (index,e) {
            //不同键盘键位对应 . 的值 87键->190  104键->110 
            if (e.keyCode === 110 || e.keyCode === 190) {
                if (index == 1) {
                    this.$nextTick(() => {
                        this.$refs.ip2.focus();
                    });
                } 
                else if (index == 2) {
                    this.$nextTick(() => {
                        this.$refs.ip3.focus();
                    });
                } 
                else {
                    this.$nextTick(() => {
                        this.$refs.ip4.focus();
                    });
                }
                this["ip"+index] = "";
            }
            //按下backspace删除键
            if (e.keyCode == 8) {
                let ipVal = this["ip"+index];
                if(ipVal==="" || ipVal==null && index!==1){
                    let indexValue = index-1;
                    this.$refs['ip'+indexValue].focus();
                }
            }
        },

        //输入框输入时
        handleInpIp(val, key) {
            //是否隐藏清除按钮
            if((this.ip1 !== null&&this.ip1 !== "") || (this.ip2 !== null&&this.ip2 !== "") || (this.ip3 !== null&&this.ip3!=="") || (this.ip4 != null&&this.ip4!=="")){
                this.isShowDeleteBtn = true;
            }
            else{
                this.isShowDeleteBtn = false;
            }

            //判断输入的ip值，如果输入值超过255，则显示为255，并且跳到下一个输入框
            if(parseInt(val) > 255) {
                switch(key) {
                    case "ip1":
                        this.ip1 = 255;
                        this.$refs.ip2.focus();
                        break;
                    case "ip2":
                        this.ip2 = 255;
                        this.$refs.ip3.focus();
                        break;
                    case "ip3":
                        this.ip3 = 255;
                        this.$refs.ip4.focus();
                        break;
                    case "ip4":
                        this.ip4 = 255;
                        break;
                    default:
                        break;
                }
            }
            //如果输入的是三位数，且范围在100到255之间，则自动跳到下一个输入值
            else if(parseInt(val) <= 255 && parseInt(val) >= 100){
                switch(key) {
                    case "ip1":
                        this.$refs.ip2.focus();
                        break;
                    case "ip2":
                        this.$refs.ip3.focus();
                        break;
                    case "ip3":
                        this.$refs.ip4.focus();
                        break;
                    default:
                        break;
                }
            }
        },

        //输入框失去焦点时
        submitIp() {
            if((this.ip1==null || this.ip1==="") && (this.ip2==null || this.ip2==="") && (this.ip3==null || this.ip3==="") && (this.ip4==null || this.ip4==="")){
                let ipVal = "";
                this.$emit('change', ipVal);
            }
            else{
                let reg = /[^\d]/g; 
                let ipVal = "";
                let regIp1 = false;
                let regIp2 = false;
                let regIp3 = false;
                let regIp4 = false;
                
                if(this.ip1 !=null && this.ip1 !==""){
                    regIp1 = reg.test(this.ip1);
                }
                if(this.ip2 !=null && this.ip2 !==""){
                    regIp2 = reg.test(this.ip2);
                }
                if(this.ip3 !=null && this.ip3 !==""){
                    regIp3 = reg.test(this.ip3);
                }
                if(this.ip4 !=null && this.ip4 !==""){
                    regIp4 = reg.test(this.ip4);
                }
                //验证ip1、ip2、ip3、ip4的输入格式，只要有一个输入不正确，就提示报错信息
                if(regIp1 || regIp2 || regIp3 || regIp4){
                    this.$message.error("请输入正确的IP地址uuu！");
                    this.ip1 = null;
                    this.ip2 = null;
                    this.ip3 = null;
                    this.ip4 = null;
                    this.isShowDeleteBtn = false; //隐藏清除按钮
                    ipVal = "";
                }
                else{
                    let ip1 = this.ip1==null?"":this.ip1;
                    let ip2 = this.ip2==null?"":this.ip2;
                    let ip3 = this.ip3==null?"":this.ip3;
                    let ip4 = this.ip4==null?"":this.ip4;
                    ipVal = ip1 + '.' + ip2 + '.' + ip3 + '.' + ip4;
                }
                this.$emit('change', ipVal);
            }
        },

        //清除ip
        clearValue () {
            //重置ip输入框
            this.ip1 = null;
            this.ip2 = null;
            this.ip3 = null;
            this.ip4 = null;
            this.isShowDeleteBtn = false; //隐藏清除按钮
            let ipVal = "";
            this.$emit('change', ipVal);
        },
    },
    watch:{
        value(val) {
            let ipVal = "";
            if(val !== null && val !== undefined && val !==""){
                let ipList = val.split('.');
                this.ip1 = ipList[0];
                this.ip2 = ipList[1];
                this.ip3 = ipList[2];
                this.ip4 = ipList[3];
                ipVal =  this.ip1+'.'+this.ip2+'.'+this.ip3+'.'+this.ip4
            }
            else{
                ipVal =="";
            }
            //this.$emit("change",ipVal)
        },
    }
}
</script>
<style scoped lang='less'>
.dot {
    width: 4px;
}
.ipBox{
    width: 291px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
.ipInput{
    width: 65px;
    /deep/ .el-input__inner {
        border: 0;
        text-align: center;
    }
    font-size: 14px;
}
.closeBtn{
    color: #C0C4CC;
    font-size: 14px;
    transition: transform .3s;
    transform: rotateZ(180deg);
    cursor: pointer;
}
</style>

如有漏洞，欢迎互动指教！！！！！！！！！！！！！

*杨丫丫*
关注
  • 12
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
文本框输入IP地址验证
06-04
可以输入IP地址自动验证，验证跟你输入电脑的ip地址验证一样
vue项目移动端实现ip输入框问题
12-11
vue框架移动端做ip输入框组件，input在浏览器和微信端兼容问题。 要求：只能输入数字，输入数字以外的字符（包括点、冒号等数字符号）时自动跳到下一段ip输入框. type=number类型，不会禁止点的输入。手动过滤拿不到包括点字符的字符串.而且输入多个点之后，拿到的值为空. 解决办法：type=tel,只能输入数字，且可以获取到点字符的输入 问题：微信下keyup事件无效，回调事件中event.keyCode返回全是229. 解决办法：监听input事件，event事件对象中keycode为空，但是event.data返回输入字符，可以实现过滤. <template> <
vue结合elementui实现ip输入框
weixin_45766506的博客
09-02 3032
不多说直接上代码： <template> <div class="ip-box"> <el-input v-model="ip1" name="ip" maxlength="3" onkeyup="value=value.replace(/[^\d]/g,'')" @keyup.native="keyupEvent(1,$event)" @blur="submitIp" @input="(val) => checkVal(val,'ip1')" ref="ip1"&
vue-ip-input-由vuejs实现的ip输入。-Vue.js开发
05-27
vue-ip-input vue 2.0的ip输入工具演示用法用法安装npm install vue-ip-input --save CommonJS var VueIpInput = require（'vue-ip-input'vue-ip-input vue的ip输入工具2.0演示演示用法安装npm install vue-ip-input --save CommonJS var VueIpInput = require（'vue-ip-input'）;新的Vue（{组件：{'vue-ip-input'：VueIpInput}，数据： function（）{return {ip：'127.0.0.1'};}，方法：{onIpChange：function（ip）{console.log（'ip input change：'，ip）;}，onIpBlur：function（ip）{ console.log（'i
用element封装一个ip输入框
m0_59394063的博客
12-12 242
【代码】用element封装一个ip输入框。
element-ui实现激活码输入框
weixin_42077503的博客
12-20 795
这个输入框分为8个框，前面的框满了4个字符后自动跳到后面的框，并且支持复制如'aaaa-aaaa-aaaa-aaaa-aaaa-aaaa-aaaa-aaaa'这样的激活码。 代码如下：（这个功能是由ip输入框修改而来，个别注释和变量名还是ip请勿见怪） <!-- * @Author: * @Date: 2021-12-16 16:43:32 * @Description: 激活码输入框 --> <template> <el-popover ...
vue中使用element绘制一个Ip输入框组件
DataJunGe的博客
06-23 2921
使用element绘制一个Ip输入框组件
vue+element封装一个填写和校验ip地址的组件
m0_49016709的博客
08-05 809
输入ip地址，输完自己切换到一下输入框，校验IP的准确性。
vue3 element-plus IP地址输入框
qq_27327279的博客
04-15 1321
vue3 ts setup ip地址输入框
【Vue】IP地址输入框
qq_40205510的博客
10-24 512
效果 使用 <template> <IpInput ref="ipInput"></IpInput> </template> this.$refs.ipInput.getIP("10.90.15.66"); const ip = this.$refs.ipInput.value.getIP(); console.log(ip); 代码 <template> <div v-for="(item, index) in ipAddre
基于vue+element的分页组件
03-03
基于vue+elementUI开发的分页组件，后端项目配置使用PageHelper，前端配合使用此组件。
基于vue + element UI 的后台管理系统模板
09-12
基于vue + element UI，实现登录页，系统主框架，动态路由的后台管理系统模板
vue+element项目中过滤输入框特殊字符小结
10-16
主要介绍了vue+element项目中过滤输入框特殊字符小结，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
基于Vue+element UI 的手动创建地区json的三级联动
07-23
基于Vue+element ui+axios的三级联动，手动创建静态的json文件，axios获取json文件，并获取数据
基于vueelement的金额格式化组件
08-10
基于vue element的金额格式化组件
基于ElementUI input 实现IPinput
乐夫天命兮的博客
03-10 1322
实现效果 代码： <template> <div :class="['ip-input-container', 'input240', disabled && 'is-disabled']" @paste="handlePaste" > <span v-for="(item, index) in list" :key="index" class="item"> <el-input :ref
vue2.x版本+element-ui2.15+版本实现只能输入数字的ip输入框，功能样式借鉴windows，与父组件双向绑定
weixin_43979556的博客
11-22 2143
基于vue+element-ui中的el-input实现ip输入框，使用@input解决中文输入法会导致v-model与value不同步的问题，同时在每个输入框中输入时都能够实时监听，这里我只判断了输入三个数字自动跳到下个输入框，在中文输入法输完确定后才将输入的非数字置空。
【前端小点】Vue3中的IP输入框组件
最新发布
球球博客
01-23 799
使用vue3写ip输入框组件
【IP地址】输入小数点，自动移到下一输入框
stay hungry, stay foolish
01-02 962
输入框最多只能输入三位数字（0-255），按下小数点(.) 光标会自动跳转到下一个输入框。
vue3+element plus input输入框限制输入
07-13
对于Vue 3和Element Plus中的输入框限制输入，你可以使用以下方法： 1. 使用`maxlength`属性限制输入框的最大长度： ```vue <el-input v-model="inputValue" maxlength="10"></el-input> ``` 上面的例子中，输入框的最大长度被限制为10个字符。 2. 使用正则表达式限制输入内容： ```vue <template> <el-input v-model="inputValue" @input="validateInput"></el-input> </template> <script> export default { data() { return { inputValue: '' } }, methods: { validateInput() { // 使用正则表达式限制输入为数字和字母 this.inputValue = this.inputValue.replace(/[^a-zA-Z0-9]/g, ''); } } } </script> ``` 上面的例子中，使用`@input`事件监听输入框的输入，然后通过正则表达式将非数字和字母的字符替换为空字符串。 3. 使用Element Plus提供的`el-input`属性限制输入： ```vue <el-input v-model="inputValue" :on-icon-click="clearInput"></el-input> ``` 在这个例子中，我们使用了`on-icon-click`属性，它将在点击清除图标时触发一个事件。你可以在该事件中清空输入框的内容。 以上是几种常见的限制输入的方法，你可以根据自己的需求选择适合的方法来实现输入框的限制。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值