vue项目移动端实现ip输入框问题


Posted in Javascript onMarch 19, 2019

vue框架移动端做ip输入框组件,input在浏览器和微信端兼容问题。

要求:只能输入数字,输入数字以外的字符(包括点、冒号等数字符号)时自动跳到下一段ip输入框.

type=number类型,不会禁止点的输入。手动过滤拿不到包括点字符的字符串.而且输入多个点之后,拿到的值为空.

解决办法:type=tel,只能输入数字,且可以获取到点字符的输入

问题:微信下keyup事件无效,回调事件中event.keyCode返回全是229.

解决办法:监听input事件,event事件对象中keycode为空,但是event.data返回输入字符,可以实现过滤.

<template>
  <div class="ipAdress">
    <ul class="ipInput" :class="{isDisabled:isDisabled}" >
      <li :key='index' v-for="(item,index) in ipAdress">
        <input :tabindex="'ipInput'+(index+1)" :class="'ipAdress'+(index+1)" @blur="blurFocus(index)" autocomplete="off" :readonly="isDisabled" maxlength="3" type="tel" pattern="[0-9]{1,3}" @input="checkIpVal(item,index,$event)" :disabled="isDisabled" @keyup="turnIpPOS(item,index,$event)" @keydown="delteIP(item,index,$event)" v-model="item.value" ref="ipInput" />
        <span v-if="index<3">.</span>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        ipAdress: [{
          value: ''
        }, {
          value: ''
        }, {
          value: ''
        }, {
          value: ''
        }],
        isWX:navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == "micromessenger"
      };
    },
    props: {
      ipStr: {
        trype: String,
        default: ''
      },
      ipType: {
        type: String
      },
      isDisabled: {
        type: Boolean,
        default: false
      },
      width: {
        type: String,
        default:'100%'
      }
    },
    watch: {
      ipStr:{
        immediate:true,
        handler:function(vall) {
          let val = vall;
          let nArr = [];
          if(val && val.includes('.') && val.length > 0) {
            let valArr = val.split('.');
            let m = valArr.length;
            for(let i = 0; i < 4; i++) {
              if(valArr[i] == 'null' || valArr[i] == 'undefined'){
                valArr[i] = '';
              }
              if(i < m) {
                nArr.push({
                  value: valArr[i]
                });
              } else {
                nArr.push({
                  value: ''
                });
              }
            }
          } else {
            nArr = [{
              value: ''
            }, {
              value: ''
            }, {
              value: ''
            }, {
              value: ''
            }];
          }
          this.ipAdress = nArr;
        }
      } 
    },
    methods: {
      //methods
      blurFocus(index) {
        if(index == 3) {
          this.$emit('blur');
        }
      },
      checkIpVal(item,index,event) {
        let self = this;
        //wx
        if(this.isWX){
          let e = event || window.event;
          let keyCode = e.data;
          
//           //.向右跳转
          if(keyCode === ".") {
            e.preventDefault();
            e.returnValue = false;
            item.value = item.value.replace(/[^\d]/g, "").replace(/[\.]/g, "");
            if(index < 3 ) {
              self.$refs.ipInput[index + 1].focus();
            }
            return false;
          }
        }
        
        
        
        
        let isNo = /^[0-9]{1,3}$/g;
        if(/[^\d]/g.test(item.value)){
          let cache = JSON.parse(JSON.stringify(self.ipAdress));
          cache[index].value = item.value.replace(/[^\d]/g, "").replace(/[\.]/g, "");
          self.ipAdress = cache;
          return false;
        }
        
        
        
        if(item.value.replace(/[^\d]/g, "").length >= 3) {        
          let val = parseInt(item.value.replace(/[^\d]/g, ""), 10);
          if(isNaN(val)) {
            val = ''
          } else if(val > 255) {
            val = 255;
          } else {
            val = val < 0 ? 0 : val;
          }
          item.value = String(val);
          this.$set(this.ipAdress,index,item);
          if(index < 3 ) {            
            self.$refs.ipInput[index + 1].focus();                
          }
        }      
        let ns = '';
        this.ipAdress.forEach(item => ns += '.' + item.value);
        if(ns.length <= 4){
          this.$emit('getIP', "", this.ipType);
        }else{
          this.$emit('getIP', ns.slice(1), this.ipType);
        }

      },
      turnIpPOS(item, index, event) {
        let self = this;
        let e = event || window.event;
        
        if(e.keyCode == 37) {
          if(index != 0) {
            self.$refs.ipInput[index - 1].focus();
          }
        }
        //右箭头、回车键、空格键、冒号均向右跳转,右一不做任何措施
        if(e.keyCode == 39 || e.keyCode == 13 || e.keyCode == 32 || e.keyCode == 110 || e.keyCode == 46 || e.keyCode == 190 ) {
          e.preventDefault();
          e.returnValue = false;
          if(index < 3 ) {
            self.$refs.ipInput[index + 1].focus();
          }
          return false;
        }
        
      },
      delteIP(item, index, event) {  
        let self = this;
        let e = event || window.event;
        
        let val = parseInt(item.value.replace(/[^\d]/g, ""), 10);
        val = isNaN(val) ? '' : val;
        if(e.keyCode == 8 && index > 0 && val.length==0) {
            self.$refs.ipInput[index - 1].focus();
        }
      }
    },
    mounted(){
      console.log(this.$props)
      console.log(this.$attrs.index)
    }
  };
</script>

<style lang="scss" scoped>
  $--border-color:#ccc;
  $--outline-color:transparent;
  $--font-color:$--input-color;
  $base-font-size:12px;
  .ipInput {
    box-sizing: border-box;
    line-height: inherit;
    border: 1px solid $--border-color;
    overflow: hidden;
    border-radius: 5px;
    padding: 0;
    margin: 0;
    display: inline-block;
    vertical-align: middle;
    outline: $--outline-color;
    font-size:0;
    text-indent: 0;
    background: #fff;
    &.isDisabled {
      background: $--outline-color;

      li{
        cursor:not-allowed;
        input{
          cursor:not-allowed;
        }
      }
    }
    li {
      display: inline-block;
      width:25%;
      box-sizing: border-box;
      font-size:0;
      input {
        appearance: none; 
        padding:10px 5px;
        width: calc(100% - 3px);
        text-align: center;
        outline: none;
        border: none;
        color: $--font-color;
        box-sizing: border-box;
        font-size: $base-font-size;
        &:disabled {
          background: $--outline-color;
        }
      }
      span {
        display: inline-block;
        font-size:$base-font-size;
        width: 3px;
        color: $--font-color;
      }
    }
  }
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
菜鸟javascript基础资料整理3 正则
Dec 06 Javascript
利用jquery的获取JS文件中的字符串内容
Feb 14 Javascript
jQuery操作input type=radio的实现代码
Jun 14 Javascript
Js 时间函数getYear()的使用问题探讨
Apr 01 Javascript
jquery ajax 局部刷新小案例
Feb 08 Javascript
jQuery中scrollLeft()方法用法实例
Jan 16 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
Feb 10 Javascript
js中数组插入、删除元素操作的方法
Feb 15 Javascript
vue中各组件之间传递数据的方法示例
Jul 27 Javascript
记一次vue去除#问题处理经过小结
Jan 24 Javascript
js实现点击图片在屏幕中间弹出放大效果
Sep 11 Javascript
javascript函数式编程基础
Sep 15 Javascript
详解使用React.memo()来优化函数组件的性能
Mar 19 #Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
Mar 19 #Javascript
express.js中间件说明详解
Mar 19 #Javascript
js array数组对象操作方法汇总
Mar 18 #Javascript
浅析JavaScript异步代码优化
Mar 18 #Javascript
js实现图片局部放大效果详解
Mar 18 #Javascript
详解在React项目中安装并使用Less(用法总结)
Mar 18 #Javascript
You might like
php文件缓存类用法实例分析
2015/04/22 PHP
ThinkPHP3.1.x修改成功与失败跳转页面的方法
2017/09/29 PHP
Javascript中的数学函数集合
2007/05/08 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
2013/01/23 Javascript
Web跨浏览器进程通信(Web跨域)
2013/04/17 Javascript
原生js实现半透明遮罩层效果具体代码
2013/06/06 Javascript
json属性名为什么要双引号(个人猜测)
2014/07/31 Javascript
js 操作符汇总
2014/11/08 Javascript
jquery实现公告翻滚效果
2015/02/27 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
2015/04/07 Javascript
基于jquery实现左右按钮点击的图片切换效果
2021/01/27 Javascript
jquery遍历table的tr获取td的值实现方法
2016/05/19 Javascript
原生js实现打字动画游戏
2017/02/04 Javascript
bootstrap输入框组使用方法
2017/02/07 Javascript
jQuery在header中设置请求信息的方法
2017/03/06 Javascript
jQuery插件zTree实现删除树节点的方法示例
2017/03/08 Javascript
Node中使用ES6语法的基础教程
2018/01/05 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
2019/01/27 Javascript
Javascript实现鼠标移入方向感知
2020/06/24 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
Django使用Mysql数据库已经存在的数据表方法
2018/05/27 Python
Python正则表达式和元字符详解
2018/11/29 Python
基于Python的图像数据增强Data Augmentation解析
2019/08/13 Python
Pytorch中的自动求梯度机制和Variable类实例
2020/02/29 Python
某公司的.net工程师面试题笔试题
2013/11/22 面试题
会计应届生的自荐信
2013/12/13 职场文书
优秀部门获奖感言
2014/02/14 职场文书
商业项目策划方案
2014/06/05 职场文书
企业文化标语大全
2014/06/10 职场文书
小学感恩节活动策划方案
2014/10/06 职场文书
政府会议通知范文
2015/04/15 职场文书
初中教师德育工作总结2015
2015/05/12 职场文书
天鹅湖观后感
2015/06/09 职场文书
大学毕业谢师宴致辞
2015/07/27 职场文书
学生会宣传部竞选稿
2015/11/21 职场文书
银行求职信怎么写
2019/06/20 职场文书