vue移动端实现ip输入框问题的解决方法介绍

vue框架移动端做ip输入框组件，input在浏览器和微信端兼容问题。
要求：只能输入数字，输入数字以外的字符（包括点、冒号等数字符号）时自动跳到下一段ip输入框.
type=number类型，不会禁止点的输入。手动过滤拿不到包括点字符的字符串.而且输入多个点之后，拿到的值为空.
解决办法：type=tel,只能输入数字，且可以获取到点字符的输入
问题：微信下keyup事件无效，回调事件中event.keyCode返回全是229.
解决办法：监听input事件，event事件对象中keycode为空，但是event.data返回输入字符，可以实现过滤.

<template>
 <div>
 <ul :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 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>

本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的JavaScript教程视频栏目！