Introduction à la solution au problème de la mise en œuvre de la boîte de saisie IP sur le terminal mobile vue

Cet article vous apporte une introduction à la méthode de définition dynamique des fonctions en Python. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Le framework vue utilise un composant de boîte de saisie IP côté mobile, et la saisie est compatible avec le navigateur et WeChat.
Exigences : seuls des chiffres peuvent être saisis. Lors de la saisie de caractères autres que des chiffres (y compris des points, des deux-points et d'autres symboles numériques), il passera automatiquement à la zone de saisie IP suivante
type=numéro, la saisie des points. ne sera pas interdit. Le filtrage manuel ne peut pas obtenir les chaînes contenant des points. De plus, après avoir saisi plusieurs points, la valeur obtenue est vide.
Solution : type=tel, seuls les nombres peuvent être saisis et la saisie de caractères point peut être obtenue
Problème : L'événement keyup sous WeChat n'est pas valide et le event.keyCode renvoyé dans l'événement de rappel est tous 229.
Solution : écoutez l'événement d'entrée, le code clé dans l'objet événement événement est vide, mais event.data renvoie l'entrée caractères, qui peuvent être filtrés .

<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>

Cet article est terminé ici Pour un contenu plus passionnant, vous pouvez faire attention à la colonne Vidéo du didacticiel JavaScript du site Web PHP chinois !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!