ip地址输入,ip输入为0-255,支持补零,光标位置判断.
效果如图:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c22d765a925c17eb1f122ac4a6950cc9.gif#pic_center)
代码:
<template>
<ul class="ipAdress" :class="{ ipAdressBorder: !disabled }">
<li v-for="(item, index) in ipAddress" :key="index">
<input :ref="'ipInput' + index" v-model="item.value" type="text" class="ipInputClass"
@input="checkIpVal(item)" @keyup="turnIpPosition(item, index, $event)" :disabled="disabled" />
<div></div>
</li>
</ul>
</template>
<script>
export default {
props: {
disabled: {
type: Boolean,
default: false
},
ipInputData: {
type: String,
}
},
data() {
return {
ipAddress: [
{
value: '',
},
{
value: '',
},
{
value: '',
},
{
value: '',
},
],
num: 0,
}
},
watch: {
ipAddress: {
handler: function (newVal) {
let ip = ""
newVal.forEach((item, index) => {
if (index < 3) {
ip = ip + this.formatter(item.value) + "."
} else {
ip = ip + this.formatter(item.value)
}
})
window.console.log('ip', ip)
},
deep: true,
},
ipInputData: {
handler: function (newVal, oldVal) {
if (!newVal) {
this.ipAddress = [
{
value: '',
},
{
value: '',
},
{
value: '',
},
{
value: '',
},
]
} else {
this.getWiredDataEvent()
}
},
deep: true,
},
},
methods: {
formatter(val) {
let value = val.toString()
if (value.length === 2) {
value = '0' + value
} else if (value.length === 1) {
value = '00' + value
} else if (value.length === 0) {
value = '000'
}
return value
},
checkIpVal(item) {
let val = item.value
val = val.toString().replace(/[^0-9]/g, '')
val = parseInt(val, 10)
if (isNaN(val)) {
val = ''
} else {
val = val < 0 ? 0 : val
val = val > 255 ? 255 : val
}
item.value = val
},
turnIpPosition(item, index, event) {
let self = this
let e = event || window.event
if (e.keyCode === 37) {
if (index !== 0 && e.currentTarget.selectionStart === 0) {
self.$refs['ipInput' + (index - 1)][0].focus()
}
} else if (e.keyCode == 39) {
if (index !== 3 && e.currentTarget.selectionStart === item.value.toString().length) {
self.$refs['ipInput' + (index + 1)][0].focus()
}
} else if (e.keyCode === 8) {
if (index !== 0 && item.value === '') {
this.num += 1
if (this.num == 2) {
this.num = 0
self.$refs['ipInput' + (index - 1)][0].focus()
}
}
} else if (e.keyCode === 13 || e.keyCode === 32 || e.keyCode === 190) {
if (index !== 3) {
self.$refs['ipInput' + (index + 1)][0].focus()
}
} else if (item.value.toString().length === 3) {
if (index !== 3) {
self.$refs['ipInput' + (index + 1)][0].focus()
}
}
},
getWiredDataEvent() {
for (var key in this.ipInputData) {
this.ipInputData.split('.').forEach((item, index) => {
this.ipAddress[index].value = item
})
}
}
},
mounted() {
this.getWiredDataEvent()
},
}
</script>
<style lang="scss" scoped>
.ipAdress {
display: flex;
padding-top: 1px;
border-radius: 4px;
width: 145px;
height: 36px;
padding-inline-start: 0px;
margin-bottom: 0;
}
.ipAdressBorder {
border: 1px solid #dcdfe6;
}
.ipAdress li {
position: relative;
height: 32px;
margin: 0;
list-style-type: none;
line-height: 32px;
}
.ipInputClass {
border: none;
width: 32px;
height: 23px;
text-align: center;
background: transparent;
color: #747474;
}
.ipAdress li div {
position: absolute;
bottom: 8px;
right: 0;
border-radius: 50%;
background: #747474;
width: 2px;
height: 2px;
}
.ipAdress li:last-child div {
display: none;
}
.ipAdress input:focus {
outline: none;
}
</style>