vue实现IP地址输入框 前端vue3、vue2、react写IP输入框）

已于 2023-10-23 16:28:38 修改
阅读量993 收藏
点赞数
分类专栏： Vue 前端技巧方法 JavaScript 文章标签： vue.js tcp/ip javascript
于 2023-03-18 14:01:32 首次发布
夜空孤狼啸
本文链接：https://blog.csdn.net/qq_43940789/article/details/129636179
版权

前端 ip地址框

在这里插入图片描述

用到了键盘监听事件 document.onkeydown 全局键盘监听
input 焦点出发 document.querySelector(‘#ip1’).focus()
下面是vue3语法，ant-design-vue 框架 react语法类似，主要里里面的方法复制走就好了

主要代码（vue2和vue3两种写法）

vue3语法

<template>
  <a-row>
    <a-col :span="14">
      <div class="ip-input">
        <input
          id="ip1"
          v-model="ipAddress.ip1"
          ref="input1"
          @input="handleInput(1)"
          @keydown="handleKeyDown($event, 1)"
          maxlength="3"
        />
        <span>.</span>
        <input
          id="ip2"
          v-model="ipAddress.ip2"
          ref="input2"
          @input="handleInput(2)"
          @keydown="handleKeyDown($event, 2)"
          maxlength="3"
        />
        <span>.</span>
        <input
          id="ip3"
          v-model="ipAddress.ip3"
          ref="input3"
          @input="handleInput(3)"
          @keydown="handleKeyDown($event, 3)"
          maxlength="3"
        />
        <span>.</span>
        <input
          id="ip4"
          v-model="ipAddress.ip4"
          ref="input4"
          @input="handleInput(4)"
          @keydown="handleKeyDown($event, 4)"
          @keyup.enter.native="saveOk"
          maxlength="3"
        />
      </div>
    </a-col>
    <a-col :span="10">
      <div style="line-height: 40px">
        &nbsp; &nbsp;<a-button @click="saveOk" type="primary">{{ $t('modal.ok') }}</a-button
        >&nbsp;
        <a-button @click="resetIp">{{ $t('fileSelect.reset') }}</a-button>
      </div>
    </a-col>
  </a-row>

  <br />
  <div style="color: #666"><sapn style="color: #f00">* </sapn>{{ $t('login.hostIpNote') }}</div>
</template>

<script lang="ts" setup>
import { message } from 'ant-design-vue';
import i18n from '/@/language';
import { onMounted, ref, reactive } from 'vue';

const IP_RULES =
  /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;

const props = defineProps({
  value: {
    type: String,
  },
});
const emit = defineEmits(['saveOk']);

const ipAddress: any = reactive({
  ip1: '',
  ip2: '',
  ip3: '',
  ip4: '',
});

onMounted(() => {
  const Store = require('electron-store');
  const store = new Store();
  let ipArr = store.get('serverAddressIp')?.split('.');
  if (ipArr) {
    ipAddress.ip1 = ipArr[0];
    ipAddress.ip2 = ipArr[1];
    ipAddress.ip3 = ipArr[2];
    ipAddress.ip4 = ipArr[3];
  }
});

const handleInput = (index: number) => {
  ipAddress[`ip${index}`] = ipAddress[`ip${index}`].replace(/[^0-9]/g, '');
  let ip = ipAddress[`ip${index}`];
  if (ip.length > 1 && ip[0] === '0') {
    ipAddress[`ip${index}`] = ip.slice(1);
  }
  if (ip > 255) {
    ipAddress[`ip${index}`] = '255';
  }
  if (ip.length === 3 || ip[0] === '0') {
    let nextIndex = index + 1;
    if (nextIndex <= 4) {
      document.querySelector(`#ip${nextIndex}`).focus();
    }
  }
};

const handleKeyDown = (event: any, index: number) => {
  let ip = ipAddress[`ip${index}`];
  if (event.keyCode == 8 && 0 == document.getElementById(`ip${index}`).selectionStart) {
    let nextIndex = index - 1;
    if (nextIndex >= 1) {
      console.log(nextIndex);

      document.querySelector(`#ip${nextIndex}`).focus();

      document
        .getElementById(`ip${nextIndex}`)
        .setSelectionRange(ipAddress[`ip${nextIndex}`].length, ipAddress[`ip${nextIndex}`].length);
    }
  } else if (
    event.keyCode == 46 &&
    ip.length == document.getElementById(`ip${index}`).selectionStart
  ) {
    let nextIndex = index + 1;
    if (nextIndex <= 4) {
      document.querySelector(`#ip${nextIndex}`).focus();

      document.getElementById(`ip${nextIndex}`).setSelectionRange(0, 0);
    }
  } else if (event.keyCode == 37 && 0 == document.getElementById(`ip${index}`).selectionStart) {
    let nextIndex = index - 1;
    if (nextIndex >= 1) {
      document.querySelector(`#ip${nextIndex}`).focus();

      document
        .getElementById(`ip${nextIndex}`)
        .setSelectionRange(ipAddress[`ip${nextIndex}`].length, ipAddress[`ip${nextIndex}`].length);
    }
  } else if (
    event.keyCode == 39 &&
    ip.length == document.getElementById(`ip${index}`).selectionStart
  ) {
    let nextIndex = index + 1;
    if (nextIndex <= 4) {
      document.querySelector(`#ip${nextIndex}`).focus();

      document.getElementById(`ip${nextIndex}`).setSelectionRange(0, 0);
    }
  } else if (event.keyCode == 110 || event.keyCode == 190) {
    let nextIndex = index + 1;
    if (nextIndex <= 4) {
      document.querySelector(`#ip${nextIndex}`).focus();
    }
  } else {
    return false;
  }
};
const saveOk = () => {
  if (ipAddress.ip1 == '' || ipAddress.ip2 == '' || ipAddress.ip3 == '' || ipAddress.ip4 == '') {
    message.warning(i18n.global.t('login.ipRules'));
  } else {
    console.log('ip');
    const ip = ipAddress.ip1 + '.' + ipAddress.ip2 + '.' + ipAddress.ip3 + '.' + ipAddress.ip4;
    emit('saveOk', ip, IP_RULES.test(ip));
  }
};
const resetIp = () => {
  ipAddress.ip1 = '';
  ipAddress.ip2 = '';
  ipAddress.ip3 = '';
  ipAddress.ip4 = '';
};
</script>

<style scoped>
.ip-input {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 40px;
  /* border: 1px solid #ccc; */
  border: 1px solid #204fc7;

  border-radius: 4px;
  padding: 0 10px;
  box-sizing: border-box;
  font-size: 16px;
}

.ip-input input {
  width: 40px;
  height: 90%;
  border: none;
  outline: none;
  text-align: center;
  font-size: 16px;
}

.ip-input span {
  font-size: 16px;
}
</style>

vue2语法

<template>
  <a-row>
    <a-col :span="14">
      <div class="ip-input">
        <input
          id="ip1"
          v-model="ip1"
          ref="input1"
          @input="handleInput(1)"
          @keydown="handleKeyDown($event, 1)"
          maxlength="3"
        />
        <span>.</span>
        <input
          id="ip2"
          v-model="ip2"
          ref="input2"
          @input="handleInput(2)"
          @keydown="handleKeyDown($event, 2)"
          maxlength="3"
        />
        <span>.</span>
        <input
          id="ip3"
          v-model="ip3"
          ref="input3"
          @input="handleInput(3)"
          @keydown="handleKeyDown($event, 3)"
          maxlength="3"
        />
        <span>.</span>
        <input
          id="ip4"
          v-model="ip4"
          ref="input4"
          @input="handleInput(4)"
          @keydown="handleKeyDown($event, 4)"
          @keyup.enter.native="saveOk"

          maxlength="3"
        />
      </div>
    </a-col>
    <a-col :span="10">
      <div style="line-height: 40px;">
        &nbsp; &nbsp;<a-button @click="saveOk" type="primary">{{ $t('modal.ok') }}</a-button
        >&nbsp;
        <a-button @click="resetIp">{{ $t('fileSelect.reset') }}</a-button>
      </div>  
    </a-col>
  </a-row>

  <br />
  <div style="color: #666"><sapn style="color: #f00">* </sapn>{{ $t('login.hostIpNote') }}</div>
</template>

<script>
import { message } from 'ant-design-vue';
import i18n from '/@/language';

const IP_RULES =
  /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;

export default {
  name: 'IpModel',
  props: {
    IP: String,
  },
  data() {
    return {
      ip1: '',
      ip2: '',
      ip3: '',
      ip4: '',
    };
  },
  created() {
    const Store = require('electron-store');
    const store = new Store();
    let ipArr = store.get('serverAddressIp')?.split('.');
    if (ipArr) {
      this.ip1 = ipArr[0];
      this.ip2 = ipArr[1];
      this.ip3 = ipArr[2];
      this.ip4 = ipArr[3];
    }
  },
  methods: {
    handleInput(index) {
      this[`ip${index}`] = this[`ip${index}`].replace(/[^0-9]/g, '');
      let ip = this[`ip${index}`];
      if (ip.length > 1 && ip[0] === '0') {
        this[`ip${index}`] = ip.slice(1);
      }
      if (ip > 255) {
        this[`ip${index}`] = '255';
      }
      if (ip.length === 3 || ip[0] === '0') {
        let nextIndex = index + 1;
        if (nextIndex <= 4) {
          this.$refs[`input${nextIndex}`].focus();
        }
      }
    },
    handleKeyDown(event, index) {
      let ip = this[`ip${index}`];
      if (event.keyCode == 8 && 0 == document.getElementById(`ip${index}`).selectionStart) {
        let nextIndex = index - 1;
        if (nextIndex >= 1) {
          this.$refs[`input${nextIndex}`].focus();
          document
            .getElementById(`ip${nextIndex}`)
            .setSelectionRange(this[`ip${nextIndex}`].length, this[`ip${nextIndex}`].length);
        }
      } else if (
        event.keyCode == 46 &&
        ip.length == document.getElementById(`ip${index}`).selectionStart
      ) {
        let nextIndex = index + 1;
        if (nextIndex <= 4) {
          this.$refs[`input${nextIndex}`].focus();
          document.getElementById(`ip${nextIndex}`).setSelectionRange(0, 0);
        }
      } else if (event.keyCode == 37 && 0 == document.getElementById(`ip${index}`).selectionStart) {
        let nextIndex = index - 1;
        if (nextIndex >= 1) {
          this.$refs[`input${nextIndex}`].focus();
          document
            .getElementById(`ip${nextIndex}`)
            .setSelectionRange(this[`ip${nextIndex}`].length, this[`ip${nextIndex}`].length);
        }
      } else if (
        event.keyCode == 39 &&
        ip.length == document.getElementById(`ip${index}`).selectionStart
      ) {
        let nextIndex = index + 1;
        if (nextIndex <= 4) {
          this.$refs[`input${nextIndex}`].focus();
          document.getElementById(`ip${nextIndex}`).setSelectionRange(0, 0);
        }
      } else if (event.keyCode == 110 || event.keyCode == 190) {
        let nextIndex = index + 1;
        if (nextIndex <= 4) {
          this.$refs[`input${nextIndex}`].focus();
        }
      } else {
        return false;
      }
    },
    saveOk() {
      if (this.ip1 == '' || this.ip2 == '' || this.ip3 == '' || this.ip4 == '') {
        message.warning(i18n.global.t('login.ipRules'));
      } else {
        console.log('ip');
        const ip = this.ip1 + '.' + this.ip2 + '.' + this.ip3 + '.' + this.ip4;

        this.$emit('saveOk', ip, IP_RULES.test(ip));

        // this.$emit('changeIP', ip);
      }
    },
    IpModelCancel() {
      this.ip1 = this.IP.split('.')[0];
      this.ip2 = this.IP.split('.')[1];
      this.ip3 = this.IP.split('.')[2];
      this.ip4 = this.IP.split('.')[3];
    },
    resetIp() {
      this.ip1 = '';
      this.ip2 = '';
      this.ip3 = '';
      this.ip4 = '';
    },
  },
};
</script>

<style scoped>
.ip-input {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0 10px;
  box-sizing: border-box;
  font-size: 16px;
}

.ip-input input {
  width: 40px;
  height: 90%;
  border: none;
  outline: none;
  text-align: center;
  font-size: 16px;
}

.ip-input span {
  font-size: 16px;
}
</style>

引用

在这里插入图片描述

<template>
  <a-modal
    :visible="identifying.IpVisible"
    :title="$t('login.hostIp')"
    width="445px"
    @cancel="() => (identifying.IpVisible = false)"
    zIndex="1"
    :footer="null"
  >
    <a-form-item label="">
      <ipInputVue3 @cancel="() => (identifying.IpVisible = false)" @saveOk="saveIp" />
    </a-form-item>
  </a-modal>
</template>

<script lang="ts" setup>
import { onMounted, reactive, watch } from 'vue';
import { message } from 'ant-design-vue';
import ipInputVue3 from '/@/components/ip/index.vue';

const props = defineProps({
  value: {
    type: String,
    default: '',
  },
});

const identifying = reactive({
  IpVisible: false,
});
onMounted(() => {});

const saveIp = (ipAddress: string, isRight: Boolean) => {
  console.log(ipAddress);

  if (isRight) {
    message.warning('ip格式正确，继续操作');
   
  } else {
    message.warning('ip格式不正确');
  }
};
</script>

<style lang="less" scoped></style>
夜空孤狼啸
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
前端面试题合集VueReact小程序NodeJs
02-25
前端面试题合集Vue+React+小程序+NodeJs
【Vue】IP地址输入框
qq_40205510的博客
10-24 493
效果 使用 <template> <IpInput ref="ipInput"></IpInput> </template> this.$refs.ipInput.getIP("10.90.15.66"); const ip = this.$refs.ipInput.value.getIP(); console.log(ip); 代码 <template> <div v-for="(item, index) in ipAddre
【前端小点】Vue3中的IP输入框组件
球球博客
01-23 745
使用vue3写ip输入框组件
vue3封装 ip地址输入框
qq_42351255的博客
02-18 466
【代码】vue3封装 ip地址输入框。
vue实现IP输入
S_m_r的博客
01-14 1434
实现原理 实现原理是用4个文本框拼到一起，中间加一个点样式，再加上对于内容的限制为0-255。 需要注意的是： 组件内部使用的props: [‘value’], value格式是 数组 所以 在页面获取数据的时候 如果后台是字符串 需要转换成数组 方可使用 展示效果 组件代码 <template> <ul class="ipAdress"> <li v-for="(item,index) in ipAddress"> <input ref=
用vue写IP地址文本框组件
qq_36637705的博客
09-17 4000
前言 实现原理是用4个文本框拼到一起，中间加一个点样式，再加上对于内容的限制为0-255，再加上光标位置的判断即可。 具体内容 在该目录下创建组件文件 文件内容如下 <template> <ul class="ipAdress"> <li v-for="(item,index) in ipAddress"> ...
iput:用于React的ip输入组件
05-27
我放 关于 用于react（> = 0.14）的ip输入组件。 用法 基本用法 import React from 'react' ; import ReactDOM from 'react-dom' ; import IPut from 'iput' ; ReactDOM . render ( < IPut> , document . getElementById ( 'app' ) ) ; 原料药 IPut道具 名称 类型 默认 描述 班级名称 细绳 根dom节点的其他CSS类 默认值 字符串|数组<String> 指定默认IP onChange 函数（值：字符串） 输入值更改时调用 isError 功能 自定义功能以检查值 例子 运行npm start并打开http://localhost:8080 在线示例： : 执照 IP
Vue3实现IP地址输入框
weixin_46096462的博客
03-23 1230
使用vue3仿照微软的ip输入框
输入ip地址，输入框超过三位直接跳到下一个
weixin_44707050的博客
11-25 1424
场景： 1.选择ip地址或域名，选择其中一个，另一个不可填写； 2.ip地址，第一个输入框不能为0；最后一个不能为255； 3.ip地址每个输入框不能超过三位数字，不能为字母； 4.输入框足3位后，自动聚焦下一个输入框； 5.自定义error样式； 解决： 1.用el-radio选择，通过disable属性控制是否可填写； 2.通过给第一个和最后一个输入框添加blur事件，分别判断不能为0 ，255的情况，还要考虑二者都填，其中一个不符合条件的情况 3.输入框不能超过三位，...
QML实现一个IP地址输入框
龚建波
07-17 1922
前言 以 Windows 网络设置里的 IP 地址输入框为参照，先看看他提供了哪些功能 输入数值范围不满足 0-255 ，或者该段的规定值，会弹错误提示框； 字符满三个后自动跳转到下一个 IP 段，或者按小数点也会进入下一段； 删除键删除完本段后再按删除自动去上一段进行删除 ； 按左右键如果光标在该段文本末尾或打头，光标自动进入相邻段； 如果选中了某个段的文本，则复制的是选中的文本，否则复制完整 IP 地址； 粘贴时如果是完整 IP 地址就覆盖每一项，如果是单个段数字则只覆盖当.
IP输入框-基于Jquery
jaky0306的专栏
11-15 2019
简单写了一下基于jquery的IP输入框，里面包括输入ip过程中 基本事件的处理，例如对键盘的监听，自动跳下一个输入框，对输入值得检测等
IP地址输入框IP地址输入框
08-19
IP地址输入框IP地址输入框IP地址输入框
前端面试题：react + js + vue +css3 布局
04-19
前端面试题：react + js + vue +css3 布局
electron框架包vue react前端页面
11-04
使用electron框架任意打包vue react前端页面，安装make即可使用，里面已经包含node_module，无需安装依赖 Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二...
前端框架及项目面试－聚焦Vue3、React、Webpack（最新升级版，包升级）
01-13
课程分享——前端框架及项目面试－聚焦Vue3/React/Webpack，最新升级版，本课程长期升级，包升级！视频画面清晰，无任何水印。
前端框架及项目面试－聚焦Vue3、React、Webpack
01-14
课程下载——前端框架及项目面试视频教程【最新版14章】，本课程长期升级，包升级！画面清晰干净，无任何水印！！提供配套的源码资料！！
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 658
步骤很详细，直接上教程……
Vue项目中异步组件的引入使用
最新发布
Niucode的博客
04-26 280
Vue项目中异步组件的引入使用
vue echarts 柱状图 堆叠柱状图
Z18834071903的博客
04-26 299
vue echarts 柱状图 堆叠柱状图
react和vue2和vue3的区别
07-29
回答: React和Vue是两个流行的前端框架，它们在一些方面有一些区别。React整体的思路是函数式的，推崇纯组件、数据不可变和单向数据流。而Vue是基于可变数据的，支持双向绑定。React的组件扩展一般通过高阶组件实现，而Vue使用mixin。React的功能相对较少，很多功能是由社区完成的，而Vue内置了很多功能，使得开发更加方便。例如，React需要使用Redux来管理状态，而Vue内置了Vuex来管理状态。此外，React使用Virtual DOM来提高性能，而Vue不需要使用Immutable来优化性能。关于React和Vue2和Vue3的区别，我没有找到相关的引用内容。但是可以说，Vue3相对于Vue2有一些重要的改进，包括更好的性能、更小的包体积、更好的TypeScript支持等。Vue3还引入了Composition API，使得组件的逻辑更加灵活和可复用。总的来说，React和Vue都是优秀的前端框架，选择哪个取决于个人的偏好和项目需求。 #### 引用[.reference_title] - *1* *2* [React和vue的区别](https://blog.csdn.net/weixin_45785651/article/details/121556598)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [React和Vue的区别](https://blog.csdn.net/PILIpilipala/article/details/118298282)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

夜空孤狼啸

你的鼓励是我创作的最大动力！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值