ip地址输入,ip输入为0-255,支持补零,光标位置判断.

效果如图:

代码:

<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,
            // default: '125.126.127.128'
        }
    },
    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 + item.value + "."
                        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
        },
        // 检查ip输入为0-255
        checkIpVal(item) {
            //确保每个值都处于0-255
            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) {
                // 删除键把当前数据删除完毕后会跳转到前一个input，左一不做任何处理
                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) {
                // 满3位，光标自动向下一个文本框
                if (index !== 3) {
                    self.$refs['ipInput' + (index + 1)][0].focus()
                }
            }
        },

        // 回显传入值 事件 如: ipInputData= 125.126.127.128
        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;
  }
  
  /*只需要3个div*/
  .ipAdress li:last-child div {
      display: none;
  }
  
  /*取消掉默认的input focus状态*/
  .ipAdress input:focus {
      outline: none;
  }
  </style>