vue項(xiàng)目移動(dòng)端實(shí)現(xiàn)ip輸入框問題
vue框架移動(dòng)端做ip輸入框組件,input在瀏覽器和微信端兼容問題。
要求:只能輸入數(shù)字,輸入數(shù)字以外的字符(包括點(diǎn)、冒號(hào)等數(shù)字符號(hào))時(shí)自動(dòng)跳到下一段ip輸入框.
type=number類型,不會(huì)禁止點(diǎn)的輸入。手動(dòng)過濾拿不到包括點(diǎn)字符的字符串.而且輸入多個(gè)點(diǎn)之后,拿到的值為空.
解決辦法:type=tel,只能輸入數(shù)字,且可以獲取到點(diǎn)字符的輸入
問題:微信下keyup事件無(wú)效,回調(diào)事件中event.keyCode返回全是229.
解決辦法:監(jiān)聽input事件,event事件對(duì)象中keycode為空,但是event.data返回輸入字符,可以實(shí)現(xiàn)過濾.
<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; // //.向右跳轉(zhuǎn) 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(); } } //右箭頭、回車鍵、空格鍵、冒號(hào)均向右跳轉(zhuǎn),右一不做任何措施 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>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Vue IP地址輸入框?qū)嵗a
- Vue使用antd中input組件去驗(yàn)證輸入框輸入內(nèi)容(rules?案例)
- vue表單驗(yàn)證之禁止input輸入框輸入空格
- vue實(shí)現(xiàn)一個(gè)6個(gè)輸入框的驗(yàn)證碼輸入組件功能的實(shí)例代碼
- vue實(shí)現(xiàn)短信驗(yàn)證碼輸入框
- element vue validate驗(yàn)證名稱重復(fù) 輸入框與后臺(tái)重復(fù)驗(yàn)證 特殊字符 字符長(zhǎng)度 及注意事項(xiàng)小結(jié)【實(shí)例代碼】
- vue中使用iview自定義驗(yàn)證關(guān)鍵詞輸入框問題及解決方法
- vue實(shí)現(xiàn)驗(yàn)證碼輸入框組件
- Vue輸入框?qū)崟r(shí)驗(yàn)證IP地址合法性并在下方進(jìn)行提示功能實(shí)現(xiàn)
相關(guān)文章
Vuex實(shí)現(xiàn)簡(jiǎn)單購(gòu)物車
這篇文章主要為大家詳細(xì)介紹了Vuex實(shí)現(xiàn)簡(jiǎn)單購(gòu)物車,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-01-01詳解Vue、element-ui、axios實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)
這篇文章主要介紹了Vue、element-ui、axios實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05Pinia簡(jiǎn)單使用以及數(shù)據(jù)持久化詳解
最近正在使用Pinia進(jìn)行狀態(tài)管理,我希望在重新刷新頁(yè)面時(shí)保持狀態(tài),下面這篇文章主要給大家介紹了關(guān)于Pinia簡(jiǎn)單使用以及數(shù)據(jù)持久化的相關(guān)資料,需要的朋友可以參考下2022-05-05關(guān)于vue.js v-bind 的一些理解和思考
本篇文章主要介紹了關(guān)于vue.js v-bind 的一些理解和思考,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06使用vue3+ts+setup獲取全局變量getCurrentInstance的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于使用vue3+ts+setup獲取全局變量getCurrentInstance的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue3具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-08-08