【IP地址】输入小数点,自动移到下一输入框

2024-01-03 05:53:45

1. 实现效果

输入框最多只能输入三位数字(0-255),按下. 光标会自动跳转到下一个输入框。
在这里插入图片描述

2. 实现过程

  • 给输入框的值绑定一个数组(有4个元素), v-for 遍历生成输入框。
  • 通过动态ref绑定每一个输入框ref
  • 监听输入框是否有输入. ,有就让下一个输入框dom元素获得焦点
<template>
   输入IP
        <el-input
          v-for="(item, i) in convertState.ip"
          :key="i"
          :ref="(e: any) => (numInputRefs[i] = e)"
          v-model="convertState.ip[i]"
          :controls="false"
          class="w-55"
          @input="handleInput(i)" />
</template>

<script setup lang="ts">
import { InputInstance } from 'element-plus';
// numInputRefs 是一个对象,存储多个ref,键名是索引,值是input实例
const numInputRefs = reactive<Record<number, InputInstance>>({});

// 输入框绑定的值
const convertState = reactive({
  ip: ['', '', '', ''],
});

// 输入时触发
const handleInput = (i) => {
  const val = convertState.ip[i];
  // 只允许数字和 .
  if (!val.match(/[0-9.]/)) {
    convertState.ip[i] = val.replace(/[^0-9.]/g, '');
  }
  if (Number(val) < 0) return (convertState.ip[i] = '0');
  if (Number(val) > 255) return (convertState.ip[i] = '255');

  if (val.includes('.')) {
    if (i < convertState.ip.length - 1) {
      // 前三个.跳转
      convertState.ip[i] = val.slice(0, -1);// 输入框移除.
      _.get(numInputRefs, i + 1).focus();// 下一个输入框获得焦点
    } else {
      convertState.ip[i] = val.slice(0, -1);
    }
  }
};
</script>

这里的完整需求是通过输入ip地址和子网掩码计算ip起始和结束地址,这个实现过程后面再放一篇~

文章来源:https://blog.csdn.net/qq_52395343/article/details/135335710
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。