vue モバイル端末に IP 入力ボックスを実装する際の問題の解決策の紹介

この記事では、Python で関数を動的に定義する方法を紹介します。参考になると思います。困っている友人は参考にしてください。お役に立てれば幸いです。

vue フレームワークはモバイル側で IP 入力ボックス コンポーネントを使用し、入力はブラウザーおよび WeChat と互換性があります。
要件: 入力できるのは数字のみです。数字以外の文字 (ドット、コロン、その他の数字記号を含む) を入力すると、自動的に次の IP 入力ボックスにジャンプします。
type=number タイプ、入力ドットの使用は禁止されません。手動フィルタリングでは、ドット文字を含む文字列を取得できません。また、複数のドットを入力すると、取得される値は空になります。
解決策: type=tel、数字のみを入力でき、ドット文字の入力は取得できます
問題: WeChat のキーアップ イベントが無効です。コールバック イベントで返されるevent.keyCode はすべて 229 です。
解決策: 入力イベントをリッスンします。イベント イベント オブジェクトのキーコードは空ですが、event.data は入力文字を返します。 .

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

この記事はここで終了しています。さらに興味深いコンテンツについては、PHP 中国語 Web サイトの JavaScript チュートリアル ビデオ 列に注目してください。

以上がvue モバイル端末に IP 入力ボックスを実装する際の問題の解決策の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。