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 原型继承介绍
Aug 30 Javascript
jQuery JSON实现无刷新三级联动实例探讨
May 28 Javascript
jquery Tab效果和动态加载的简单实例
Dec 11 Javascript
jQuery插件datalist实现很好看的input下拉列表
Jul 14 Javascript
js选择器全面解析
Jun 27 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
Sep 26 Javascript
React Native使用Modal自定义分享界面的示例代码
Oct 31 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
Apr 04 Javascript
layui富文本编辑器前端无法取值的解决方法
Sep 18 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
Jan 16 Javascript
vue抽出组件并传值实例
Jul 31 Javascript
js实现上传图片到服务器
Apr 11 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 htmlspecialchars()与shtmlspecialchars()函数的深入分析
2013/06/05 PHP
php简单获取目录列表的方法
2015/03/24 PHP
PHP递归实现汉诺塔问题的方法示例
2017/11/25 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
JavaScript-世界上误解最深的语言分析
2007/08/12 Javascript
JS 自动安装exe程序
2008/11/30 Javascript
Jquery阻止事件冒泡 event.stopPropagation
2011/12/11 Javascript
jquery offset函数应用实例
2012/11/14 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
2012/12/19 Javascript
js 动态给元素添加、移除事件的实现方法
2016/07/19 Javascript
AngularJS 输入验证详解及实例代码
2016/07/28 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
2016/08/01 Javascript
Angular实现的简单定时器功能示例
2017/12/28 Javascript
JS实现点击按钮可实现编辑功能
2018/07/03 Javascript
vue的全局变量和全局拦截请求器的示例代码
2018/09/13 Javascript
vue 表单验证按钮事件交由父组件触发的方法
2018/12/17 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
2019/08/28 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
2019/09/21 Javascript
Python实现的数据结构与算法之链表详解
2015/04/22 Python
python web框架学习笔记
2016/05/03 Python
python中set常用操作汇总
2016/06/30 Python
python selenium 查找隐藏元素 自动播放视频功能
2019/07/24 Python
python datetime中strptime用法详解
2019/08/29 Python
python中web框架的自定义创建
2019/09/08 Python
Python + opencv对拍照得到的图片进行背景去除的实现方法
2020/11/18 Python
区域销售经理岗位职责
2013/12/10 职场文书
翻译学院毕业生自荐书
2014/02/02 职场文书
开业庆典策划方案
2014/02/18 职场文书
《盘古开天地》教学反思
2014/02/28 职场文书
空乘英文求职信
2014/04/13 职场文书
公司捐款倡议书
2014/05/14 职场文书
民政局副局长民主生活会个人对照检查材料
2014/09/19 职场文书
反腐倡廉观后感
2015/06/08 职场文书
运动会200米广播稿
2015/08/19 职场文书
浅谈Go语言多态的实现与interface使用
2021/06/16 Golang
简单且有用的Python数据分析和机器学习代码
2021/07/02 Python