実現機能：
1。左から右に
入力可能、2。入力タイプを制御（入力番号のみ）
3。右から左に削除可能
実現アイデア：
1.4入力ボックス、IDを介してフォーカス変更を実現、したがって他のボックスに転送します
。2。通常のルールで入力の種類を
制御します
。3 。キーボードの入力キーシーケンス番号で制御します。欠陥：
左右のキーを切り替えるため、このデモでは上記のコードを実装していません
。
<template>
<div class="deployApIpLocation">
<div class="btn_item">
<div class="btn">
<div class="ip_box">
<div class="item">
<div class="title">IP地址:</div>
<div class="IPContainer">
<span class="ipaddr"
><div class="IPDiv">
<input
class="IPInput"
id="apip-ip-addr0"
type="text"
size="3"
maxlength="3"
v-model="ip.ip1"
@keydown="
inputAddrDele($event, 0, 'apip-ip-addr'),
inputAddr($event, 0, 'apip-ip-addr')
"
onkeyup="value=value.replace(/[^\d]/g,'')"
/>
<!-- @keyup="keyup($event)" -->
<!-- onkeyup="value=value.replace(/[^\d]/g,'')" -->
.
<input
class="IPInput"
id="apip-ip-addr1"
type="text"
size="3"
v-model="ip.ip2"
maxlength="3"
@keydown="
inputAddrDele($event, 1, 'apip-ip-addr'),
inputAddr($event, 1, 'apip-ip-addr')
"
onkeyup="value=value.replace(/[^\d]/g,'')"
/>
.
<input
class="IPInput"
id="apip-ip-addr2"
type="text"
size="3"
v-model="ip.ip3"
maxlength="3"
@keydown="
inputAddrDele($event, 2, 'apip-ip-addr'),
inputAddr($event, 2, 'apip-ip-addr')
"
onkeyup="value=value.replace(/[^\d]/g,'')"
/>
.
<input
class="IPInput"
id="apip-ip-addr3"
type="text"
size="3"
v-model="ip.ip4"
maxlength="3"
@keydown="
inputAddrDele($event, 3, 'apip-ip-addr'),
inputAddr($event, 3, 'apip-ip-addr')
"
onkeyup="value=value.replace(/[^\d]/g,'')"
/></div
></span>
</div>
</div>
<div class="item">
<div class="title">子网掩码:</div>
<div class="IPContainer">
<span class="ipaddr"
><div class="IPDiv">
<input
class="IPInput"
id="apip-subnet-mask0"
type="text"
size="3"
maxlength="3"
v-model="mask.a1"
@keydown="
inputAddrDele($event, 0, 'apip-subnet-mask'),
inputAddr($event, 0, 'apip-subnet-mask')
"
onkeyup="value=value.replace(/[^\d]/g,'')"
/>
<!-- @keyup="keyup($event)" -->
<!-- onkeyup="value=value.replace(/[^\d]/g,'')" -->
.
<input
class="IPInput"
id="apip-subnet-mask1"
type="text"
size="3"
v-model="mask.a2"
maxlength="3"
@keydown="
inputAddrDele($event, 1, 'apip-subnet-mask'),
inputAddr($event, 1, 'apip-subnet-mask')
"
onkeyup="value=value.replace(/[^\d]/g,'')"
/>
.
<input
class="IPInput"
id="apip-subnet-mask2"
type="text"
size="3"
v-model="mask.a3"
maxlength="3"
@keydown="
inputAddrDele($event, 2, 'apip-subnet-mask'),
inputAddr($event, 2, 'apip-subnet-mask')
"
onkeyup="value=value.replace(/[^\d]/g,'')"
/>
.
<input
class="IPInput"
id="apip-subnet-mask3"
type="text"
size="3"
v-model="mask.a4"
maxlength="3"
@keydown="
inputAddrDele($event, 3, 'apip-subnet-mask'),
inputAddr($event, 3, 'apip-subnet-mask')
"
onkeyup="value=value.replace(/[^\d]/g,'')"
/></div
></span>
</div>
</div>
<div class="item">
<div class="title">默认网关:</div>
<div class="IPContainer">
<span class="ipaddr"
><div class="IPDiv">
<input
class="IPInput"
id="apip-default-gateway0"
type="text"
size="3"
maxlength="3"
v-model="gateway.a1"
@keydown="
inputAddrDele($event, 0, 'apip-default-gateway'),
inputAddr($event, 0, 'apip-default-gateway')
"
onkeyup="value=value.replace(/[^\d]/g,'')"
/>
<!-- @keyup="keyup($event)" -->
<!-- onkeyup="value=value.replace(/[^\d]/g,'')" -->
.
<input
class="IPInput"
id="apip-default-gateway1"
type="text"
size="3"
v-model="gateway.a2"
maxlength="3"
@keydown="
inputAddrDele($event, 1, 'apip-default-gateway'),
inputAddr($event, 1, 'apip-default-gateway')
"
onkeyup="value=value.replace(/[^\d]/g,'')"
/>
.
<input
class="IPInput"
id="apip-default-gateway2"
type="text"
size="3"
v-model="gateway.a3"
maxlength="3"
@keydown="
inputAddrDele($event, 2, 'apip-default-gateway'),
inputAddr($event, 2, 'apip-default-gateway')
"
onkeyup="value=value.replace(/[^\d]/g,'')"
/>
.
<input
class="IPInput"
id="apip-default-gateway3"
type="text"
size="3"
v-model="gateway.a4"
maxlength="3"
@keydown="
inputAddrDele($event, 3, 'apip-default-gateway'),
inputAddr($event, 3, 'apip-default-gateway')
"
onkeyup="value=value.replace(/[^\d]/g,'')"
/></div
></span>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
ip: {
ip1: 0,
ip2: 0,
ip3: 0,
ip4: 0,
},
gateway: {
a1: 0,
a2: 0,
a3: 0,
a4: 0,
},
mask: {
a1: 0,
a2: 0,
a3: 0,
a4: 0,
},
module_addr: 0,
};
},
created() {
},
mounted() {
},
computed: {
},
methods: {
inputAddrDele(e, a, b) {
// console.log(b);
var keynum = window.event ? e.keyCode : e.which;
// console.log(keynum);
if (keynum == 8 || keynum == 46) {
for (let i = 4; i > 0; i--) {
if (i == a) {
// console.log(a);
// var input = $("[name='apip-ip-addr" + a + "']").val();
var input = document.getElementById(b + a).value;
// console.log(input);
if (input.length < 1) {
// $("[name='apip-ip-addr" + (a - 1) + "']").focus();
// document.getElementById(b + a).textContent = "";
document.getElementById(b + (a - 1)).focus();
}
}
}
}
},
inputAddr(e, a, b) {
var keynum = window.event ? e.keyCode : e.which;
if (
keynum == 229 ||
keynum == 48 ||
keynum == 49 ||
keynum == 50 ||
keynum == 51 ||
keynum == 52 ||
keynum == 53 ||
keynum == 54 ||
keynum == 55 ||
keynum == 56 ||
keynum == 57 ||
keynum == 96 ||
keynum == 97 ||
keynum == 98 ||
keynum == 99 ||
keynum == 100 ||
keynum == 101 ||
keynum == 102 ||
keynum == 103 ||
keynum == 104 ||
keynum == 105
) {
for (let i = 0; i < 4; i++) {
if (i == a) {
var input = document.getElementById(b + a).value;
// var input = $("[name='apip-ip-addr" + a + "']").val();
if (input.length > 2) {
// $("[name='apip-ip-addr" + (a + 1) + "']").focus();
if (i == 3) {
return;
}
document.getElementById(b + (a + 1)).focus();
}
}
}
}
},
},
};
</script>
<style lang="scss">
.deployApIpLocation {
.btn_item {
display: flex;
justify-self: start;
}
.btn {
display: flex;
line-height: 3.5rem;
width: 40rem;
margin: 1rem 0;
.title {
width: 6rem;
}
.input {
margin: 0 1rem;
}
}
.ip_box {
display: flex;
.item {
width: 25rem;
display: flex;
line-height: 3.5rem;
font-size: 1.4rem;
.title {
width: 7rem;
}
.IPContainer {
background-color: #fff;
background-image: none;
border-radius: 4px;
border: 1px solid #dcdfe6;
box-sizing: border-box;
color: #606266;
display: inline-block;
font-size: inherit;
height: 35px;
line-height: 35px;
outline: 0;
padding: 0 15px;
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
widows: 10rem;
.div.IPDiv {
background: #ffffff;
width: 160px;
font-size: 9pt;
border: 1px solid #808080;
line-height: 32px;
display: inline-block;
}
input.IPInput {
width: 24px;
font-size: 10pt;
text-align: center;
border-width: 0;
}
}
}
}
}
</style>