html实现ip输入框功能代码

news2024/9/30 23:34:35

伪代码:

<style>                 
.login-user {
    display: flex;
    color: #000;
    line-height: 30px;
}
.login-user input{
    height: 46px;
    border-radius: 4px;
    margin: 0px 4px;
}
</style>

<div class="layui-form-item login-user">
    <input type="text" id="ip_b_1" class="layui-input numInput" />.
    <input type="text" id="ip_b_2" class="layui-input numInput" />.
    <input type="text" id="ip_b_3" class="layui-input numInput" />.
    <input type="text" id="ip_b_4" class="layui-input numInput" />
</div>

<script>
// ip输入框的最大值
let ip_max = 255;
let FileIPL = localStorage.getItem("showIP") || "192.168.1.199";
setIpInput(FileIPL);

//设置IP端口默认值
function setIpInput(ip) {
    let newIp =  ip.split('.');
    $("#ip_b_1").val(newIp[0]);
    $("#ip_b_2").val(newIp[1]);
    $("#ip_b_3").val(newIp[2]);
    $("#ip_b_4").val(newIp[3]);
}

// 监听键盘输入事件
$(".numInput").bind("keydown", function (event) {
    let code = event.keyCode;
    // 只能输入数字键、删除键、小数点,tab键,其他的都不能输入
    if ((code < 48 && 8 != code && 37 != code && 39 != code && 9 != code) ||
        (code > 57 && code < 96) ||
        (code > 105 && 110 != code && 190 != code)) {
        return false;
    }
    // 如果输入了点,右键 (.),则直接跳转到下一个输入框并选中值
    if (code == 110 || code == 190 || code == 39 || code == 40) {
        $(this).next().focus()
            .select();
        return false;
    }
    if (code == 37 || code == 38) {
        $(this).prev().focus()
            .select();
        return false;
    }
});
// 监听键盘离开事件
$(".numInput").bind("keyup", function (event) {
    // 判断当前输入框的值
    let code = event.keyCode;
    let value = $(this).val();
   
    // 如果输入的值大于ip最大值,则默认设置为255
    if (value != null && value != '' && parseInt(value) > ip_max) {
        $(this).val("255");
        return false;
    }
    // 如果输入框的值大于100并且按键不为上下左右点,并且符合规则,则跳转到下一个输入框并选中值
    if ((code !== 9 && code !== 110 && code !== 190 && code !== 39 && code !== 37 && code !== 38 && code !== 40) && value != null && value != '' && parseInt(value) >= 100 && parseInt(value) <= ip_max) {
        $(this).next().focus()
            .select();
        return false;
    }
    // 判断是否是0开头的不规范数字
    if (value != null && value != '' && parseInt(value) != 0) {
        // 如果当前输入的是0开头,则把0去掉,方法是直接转数字即可
        value = parseInt(value);
        if (isNaN(value)) {
            $(this).val("");
        } else {
            $(this).val("" + value);
        }
    }
});

// 失去焦点事件
$(".numInput").bind("blur", function () {
    let value = $(this).val();
    // 如果失去焦点,当前的值为0,则加上红色边框,否则去掉红色边框
    if (value == null || value == '' || value == undefined) {
        $(this).css("border-color", "red");
    } else {
        $(this).css("border-color", "");
    }
});
</script>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/128426.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

数据可视化②:bi解决方案之大学生就业分析

大学生就业是和我们息息相关的话题&#xff0c;每一位大学生都关注着&#xff0c;我们常常在网络上看到有关大学生就业的话题&#xff0c;比如毕业季的一些讨论。在大一的创新创业课中&#xff0c;我们也了解到自己所学的专业和以后如何就业&#xff0c;往哪方面就业。但我们了…

进程与线程的区别和联系是什么?

进程概念的引入 在多道程序的环境下&#xff0c;程序的并发执行代替了程序的顺序执行。它破坏了程序的封闭性和可再现性&#xff0c;使得程序和计算不再一一对应&#xff0c;而且由于资源共享和程序的并发执行导致在各个程序活动之间可能存在相互制约关系。总之&#xff0c;程…

MobTech秒验 I 寒冬加时,金融行业如何走出阴霾?

互联网流量红利将逝&#xff0c;企业运营重点已从“以产品为重心”转移至“以用户为导向”&#xff0c;而用户时间的碎片化及不聚焦&#xff0c;往往造成了线上运营推广投放后的石沉大海。 当下&#xff0c;迫切需要去做的是对存量数据的精细化管理&#xff0c;企业应打破数据…

Kafka的终极UI工具丨Offset Explorer功能简介

Offset Explorer&#xff08;以前称为Kafka Tool&#xff09;是一个用于管理和使Apache Kafka 集群的GUI应用程序。它提供了一个直观的UI&#xff0c;允许人们快速查看Kafka集群中的对象以及存储在集群主题中的消息。它包含面向开发人员和管理员的功能。 一些关键功能包括&…

Java 中的浅拷贝和深拷贝

开发过程中&#xff0c;有时会遇到把现有的一个对象的所有成员属性拷贝给另一个对象的需求。这个时候就会用到拷贝这个概念。把原对象定义成 A&#xff0c;拷贝后的对象定义成 B&#xff0c;如果只是单纯使用 clone 方法进行拷贝&#xff0c;你会发现&#xff1a; 对于八个基本…

基于unity物体定点移动与模拟刹车的细节 GIF 图文详解——线性差值函数以及平滑阻尼的运用和实践(Lerp AND SmoothDamp)

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! 本文由 秩沅 原创 收录于专栏 [unity常用API] ⭐相关文章&#xff1a;基础不牢&#xff0c;地动山摇系列 ------ 软硬通吃 unity常用API ⭐…

Arduino与Proteus仿真实例-TFT LCD绘制酷炫曲线图表

TFT LCD绘制酷炫曲线图表 本文将介绍如何在ILI9341 TFT LCD中绘制酷炫曲线图表仿真。 在前面的文章中,对ILI9341的驱动仿真作了详细的介绍,请参考: Arduino与Proteus仿真实例-TFT显示屏(ILI9341驱动器)SPI驱动仿真1、仿真电路原理图 2、仿真代码实现 本次实例使用到如下开…

23种设计模式(一)——单例模式【对象性能】

文章目录意图什么时候使用单例单例模式的实现1、有缺陷的懒汉式2、线程安全、内存安全的懒汉式单例 &#xff08;智能指针&#xff0c;锁&#xff09;3、最推荐的懒汉式单例([magic](https://so.csdn.net/so/search?qmagic&spm1001.2101.3001.7020) static )——局部静态变…

Wondershare 有哪些不错的办公软件呢

第一款 Wondershare UniConverter14 Wondershare UniConverter中文学习版(万兴优转)是一款国产全能视频格式转换软件.万兴格式转换器最新版具有音视频格式转换,合并视频,视频压缩,视频编辑,视频录制,视频下载,视频元数据修复,VR视频转换,字幕编辑器,GIF制作,DVD刻录等一站式视…

天线参数介绍

1.天线辐射元件种类图1-1 天线辐射元件种类如图1-1所示&#xff0c;天线辐射元件种类有&#xff1a;电镀偶极子、印刷电路偶极子、裂缝波导、凹口辐射器、矩形贴片辐射器、开口波导等。2、天线参数2.1 天线方向图天线方向图又叫辐射方向图&#xff08;radiation pattern&#x…

【MySQL基础教程】多表查询

前言 本文为 【MySQL基础教程】多表查询 相关知识&#xff0c;下边将对多表关系&#xff0c;多表查询概述&#xff0c;内连接&#xff0c;外连接&#xff0c;自连接&#xff0c;子查询&#xff0c;多表查询案例等进行详尽介绍~ &#x1f4cc;博主主页&#xff1a;小新要变强 的…

分布式理论协议与算法 第一弹 CAP理论

CAP 理论&#xff0c;也被称为 CAP 协议&#xff0c;指的是在一个分布式系统中&#xff0c;最多只能同时满足「一致性&#xff08;Consistency&#xff09;」、「可用性&#xff08;Availability&#xff09;」和「分区容错性&#xff08;Partition tolerance&#xff09;」这三…

Vue3 中组合式下的侦听器

目录前言&#xff1a;前置代码&#xff1a;创建侦听器停止侦听器watch侦听&#xff1a;对象中的某一个属性变化(需要提供getter函数才行)watch侦听&#xff1a;整个对象watch侦听&#xff1a;如果嵌套属性发生改变&#xff0c;默认是无法执行回调函数的?watch侦听&#xff1a;…

【实战与杂谈】如何复活一个开源网站-游戏王卡片生成器

1. 杂谈 作为一名十多年游戏王玩家&#xff0c;学生时代玩的是PSP和PS2上的游戏&#xff0c;到毕业后使用YGOPRO同步新卡片进行联网对战&#xff0c;再到现在约到线下进行实体卡片游戏。有些卡片价格太贵&#xff0c;因此我们对于这些卡在未购买之前都会自己打印出来暂时游玩…

sec5-属性

1 属性 GObject系统提供属性。属性是由实例保存的值&#xff0c;实例是GObject的后代&#xff0c;它们对其他实例开放。可以通过他们的名字访问他们。 例如&#xff0c;GtkWindow具有"title"、“default-width”、"default-height"等属性。字符串"t…

正经科普:DDos高防ip详解

白衬衫容易发黄&#xff0c; 一般洗衣液很难洗掉&#xff0c; 不少人为此感到头疼&#xff0c; 不妨在洗的时候吃点头痛药。 这边我也不多废话,大家直接看图,高防ip原理如下清洗能力 DDoS高防IP采用BGP链路对接全国各地30家运营商&#xff0c;总防御能力超4T。采用电信云堤近源…

智能优化算法:人工兔优化算法-附代码

智能优化算法&#xff1a;人工兔优化算法 摘要&#xff1a;人工兔优化算法( [Artificial rabbits optimization&#xff0c;RSO)是 Liying Wang等 于 2022 年提出的一种新型元启发式优化算法 。 该算法受来源于自然界中兔子的生存策略的启发&#xff0c;具有寻优能力强&#x…

【2.1】服务拆分--案例Demo

服务拆分--案例Demo服务拆分注意事项&#xff1a;导入服务拆分Demo测试结果&#xff1a;总结知识内容来自于黑马程序员视频教学和百度百科。博主仅作笔记整理便于回顾学习。如有侵权请私信我。 服务拆分注意事项&#xff1a; 比如现在有一个需求&#xff0c;是查询订单&#x…

国产GPU芯片突破重围,迎来新发展,中国崛起的力量

最近&#xff0c;在GPU芯片领域我们终于迎来新进展&#xff0c;有望突破欧美企业垄断&#xff0c;实现完全国产化。高端GPU芯片对科技发展有着重要作用&#xff0c;广泛应用于云上服务、高密度高性能计算等领域&#xff0c;然而绝大部分GPU芯片市场都被英伟达、AMD、微软等国外…

骨传导耳挂式耳机排名前十名,最好的骨传导耳机推荐

挂耳式的骨传导耳机在佩戴时更舒适以及更加牢固&#xff0c;日常在多种场景使用都能完全兼顾。但是最好的骨传导耳机有哪些呢&#xff1f;还不知道如何选择骨传导耳机&#xff0c;可以看看这五款骨传导耳机~ 1、南卡Runner Pro4骨传导蓝牙耳机 &#xffe5;1498 选择骨传导耳机…