Introduction to the solution to the problem of implementing IP input box on vue mobile terminal

This article brings you an introduction to the method of dynamically defining functions in Python. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The vue framework uses the IP input box component on the mobile side, and the input is compatible with the browser and WeChat.
Requirements: Only numbers can be entered. When characters other than numbers are entered (including dots, colons and other numeric symbols), it will automatically jump to the next IP input box.
type=number type, the input of dots will not be prohibited. Manual filtering cannot get strings containing dot characters. Moreover, after entering multiple dots, the value obtained is empty.
Solution: type=tel, only numbers can be entered, and input of dot characters can be obtained
Problem: The keyup event under WeChat is invalid. The event.keyCode returned in the callback event is all 229.
Solution: Listen to the input event. The keycode in the event event object is empty, but event.data returns the input characters, which can be filtered. .

<template>
    <div>
        <ul :class="{isDisabled:isDisabled}" >
            <li :key=&#39;index&#39; v-for="(item,index) in ipAdress">
                <input :tabindex="&#39;ipInput&#39;+(index+1)" :class="&#39;ipAdress&#39;+(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] == &#39;null&#39; || valArr[i] == &#39;undefined&#39;){
                                valArr[i] = &#39;&#39;;
                            }
                            if(i < m) {
                                nArr.push({
                                    value: valArr[i]
                                });
                            } else {
                                nArr.push({
                                    value: &#39;&#39;
                                });
                            }
                        }
                    } else {
                        nArr = [{
                            value: &#39;&#39;
                        }, {
                            value: &#39;&#39;
                        }, {
                            value: &#39;&#39;
                        }, {
                            value: &#39;&#39;
                        }];
                    }
                    this.ipAdress = nArr;
                }
            } 
        },
        methods: {
            //methods
            blurFocus(index) {
                if(index == 3) {
                    this.$emit(&#39;blur&#39;);
                }
            },
            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 = &#39;&#39;;
                this.ipAdress.forEach(item => ns += '.' + item.value);
                if(ns.length <= 4){
                    this.$emit(&#39;getIP&#39;, "", this.ipType);
                }else{
                    this.$emit(&#39;getIP&#39;, 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) ? &#39;&#39; : 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>

This article has ended here. For more exciting content, you can pay attention to the JavaScript Tutorial Video column of the PHP Chinese website!

The above is the detailed content of Introduction to the solution to the problem of implementing IP input box on vue mobile terminal. For more information, please follow other related articles on the PHP Chinese website!