vue 프로젝트 이동 단 ip 입력 상자 문제 실현
요구:숫자 만 입력 할 수 있 습 니 다.숫자 이외 의 문자(점,콜론 등 숫자 기호 포함)를 입력 할 때 자동 으로 다음 ip 입력 상자 로 이동 합 니 다.
type=number 형식 으로 점 의 입력 을 금지 하지 않 습 니 다.점 문 자 를 포함 하 는 문자열 을 수 동 으로 걸 러 낼 수 없습니다.또한 여러 점 을 입력 하면 값 이 비어 있 습 니 다.
해결 방법:type=tel,숫자 만 입력 할 수 있 고 점 문자 의 입력 을 얻 을 수 있 습 니 다.
질문:위 챗 에서 keyup 이벤트 가 잘못 되 었 습 니 다.리 셋 이벤트 에서 이벤트.keyCode 반환 은 모두 229 입 니 다.
해결 방법:input 이벤트 감청,이벤트 이벤트 대상 중 키 코드 가 비어 있 지만 이벤트.data 는 입력 문 자 를 되 돌려 주 고 필 터 를 실현 할 수 있 습 니 다.
<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;
// //.
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 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>
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.