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

已于 2023-10-23 16:28:38 修改
阅读量1.4k 收藏 1
点赞数
分类专栏： 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>
夜空孤狼啸
关注
专栏目录
Qt实现IP输入框
jiulanbi74的博客
09-18 423
Qt实现IP输入框
vue项目移动端实现ip输入框问题
10-17
主要介绍了vue项目移动端实现ip输入框问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue-ip-input-由vuejs实现的ip输入。-Vue.js开发
05-27
vue-ip-input vue 2.0的ip输入工具演示用法用法安装npm install vue-ip-input --save CommonJS var VueIpInput = require（'vue-ip-input'vue-ip-input vue的ip输入工具2.0演示演示用法安装npm install vue-ip-input --save CommonJS var VueIpInput = require（'vue-ip-input'）;新的Vue（{组件：{'vue-ip-input'：VueIpInput}，数据： function（）{return {ip：'127.0.0.1'};}，方法：{onIpChange：function（ip）{console.log（'ip input change：'，ip）;}，onIpBlur：function（ip）{ console.log（'i
【Vue】IP地址输入框
qq_40205510的博客
10-24 803
效果 使用 <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
vue2-elementui-IP输入框组件
最新发布
samo9527的博客
08-13 937
IP校验src/utils/validate.js。自定义指令number。
【前端小点】Vue3中的IP输入框组件
球球博客
01-23 1411
使用vue3写ip输入框组件
Vue3实现IP地址输入框
weixin_46096462的博客
03-23 1418
使用vue3仿照微软的ip输入框
vue实现IP输入
S_m_r的博客
01-14 1524
实现原理 实现原理是用4个文本框拼到一起，中间加一个点样式，再加上对于内容的限制为0-255。 需要注意的是： 组件内部使用的props: [‘value’], value格式是 数组 所以 在页面获取数据的时候 如果后台是字符串 需要转换成数组 方可使用 展示效果 组件代码 <template> <ul class="ipAdress"> <li v-for="(item,index) in ipAddress"> <input ref=
前端框架及项目面试－聚焦Vue3、React、Webpack（最新升级版，包升级）
01-13
本课程"前端框架及项目面试－聚焦Vue3/React/Webpack"是针对这一领域的最新升级版，旨在帮助开发者掌握并理解三大主流前端框架Vue3、React以及Webpack的核心概念和实际应用。 Vue3作为Vue.js框架的最新版本，引入了...
2023最新前端面试题总结HTML5+CSS3+JS+TS4+Vue3+React18+八股文+手写+项目+笔试
08-10
2023年最全前端面试（20w字）HTML5+CSS3+JS+TS4+Vue3+React18+八股文+手写+项目+笔试 （一开始就是在CSDN博客上写的，现在应部分同学的要求，我直接将博客内容复制成pdf
IP地址输入框
12-25
自己写的小东西，不过还有些不完善，大家可以给我发信息来完善。写了别忘记了分享啊！哈哈哈
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
同时支持Intact/Vue/React框架的前端组件库
05-28
# Vue3 npm install @king-design/vue --save # Vue2 npm install @king-desing/vue-legacy --save 使用 <Button>Hello import {Button} from 'kpc-vue'; export default { components: { Button } } ...
electron框架包vue react前端页面
11-04
使用electron框架任意打包vue react前端页面，安装make即可使用，里面已经包含node_module，无需安装依赖 Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二...
前端面试题合集VueReact小程序NodeJs
02-25
在当前的IT行业中，前端开发扮演着至关重要的角色，涵盖了诸如Vue、React、小程序和Node.js等技术。这些工具和技术都是构建现代Web应用的核心部分。本文将深入探讨这些技术的相关面试知识点，帮助开发者们准备面试，...
vue3封装 ip地址输入框
qq_42351255的博客
02-18 853
【代码】vue3封装 ip地址输入框。
前端编写ip地址输入框
weixin_43939111的博客
10-21 1294
前端编写ip地址输入框 项目需要临时写的，没有用到兼容性方面的知识，代码已整理好，可直接运行看效果。本人小白一枚，有不足的地方请指正 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>
vue实现IP地址输入界面，原生实现IP地址输入界面（稍微改改就可以）
来了波，兄嘚
12-18 1505
上代码： <template> <div class="deployApIpLocation"> <div class="btn_item"> <div class="btn"> <div class="ip_box"> <div class="item"> <div class="title">IP地址:</div> .
2022前端Vue和React面试题精粹与框架比较
资源摘要信息:"2022最新高频前端面试题汇总之vue和react篇" **知识点一：Vue.js** 1. Vue.js框架概述： Vue.js 是一个轻量级的前端JavaScript框架，专注于视图层，易于上手，同时也支持复杂的单页面应用程序。它...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

夜空孤狼啸

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

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

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

打赏作者

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

抵扣说明：

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

余额充值