<!DOCTYPE html>

<html lang="zh-cn">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->

    <link href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>

      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

  </head>

  <body>

   <div class="container">

<form class="form-horizontal" role="form">

  <div class="form-group">

    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>

    <div class="col-sm-10">

      <input type="text" class="form-control input-sm" name="ip[]" placeholder="Email">

      <input type="text" class="form-control input-sm" name="ip[]" placeholder="Email">

      <input type="text" class="form-control input-sm" name="ip[]" placeholder="Email">

      <input type="text" class="form-control input-sm" name="ip[]" placeholder="Email">

    </div>

  </div>

</form>

    </div> <!-- /container -->

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>

    <script>

    $(function(){

      var valid_number = function(num) {

        if ( (num >= 48 && num <= 57) || (num >= 96 && num <= 105) ) {

          return true;

        }

        else {

          return false;

        }

      }

      var input_number = function(num) {

        if (num >= 48 && num <= 57) {

          return num - 48;

        }

        else if(num >= 96 && num <= 105) {

          return num - 96;

        }

      }

      //键盘按下事件

      $("[name='ip[]']").keydown(function(e){

        console.log(e);

        var val = $(this).val();

        //如果键入不是数字并且不是.并且不是回车并且值不是空

        if (!valid_number(e.keyCode) && e.keyCode != 190 && e.keyCode != 110 && e.keyCode != 8) {

          return false;

        }

        // 如果键入退格

        if (e.keyCode == 8 && $(this).val() == '') {

          $(this).prev().focus();

          return false;

        }

        //如果键入不是退格键，但3个数字 或者(键入.且值不为空)

        if ((val.length == 3 || (e.keyCode == 190 || e.keyCode == 110) && val != '') && e.keyCode != 8) {

          $(this).next().focus();

          //如果是数字

          if (valid_number(e.keyCode)) {

              $(this).next().val(input_number(e.keyCode));

          }

          return false;

        }

      });

        //键盘抬起事件

      $("[name='ip[]']").keyup(function(e){

        var val = $(this).val();

        //排除非数字

        val=val.replace(/[^\d]/ig,'');

        $(this).val(val);

        //判断数字范围

        if (val < 0 || val > 255){

          $(this).val('');

          return false;

        }

      });

    });

    </script>

  </body>

</html>

效果图

输入.或者够3位合格数字，自动把当前键入值赋值给下一个文本框

ip输入框键入.或者合法数字自动选择下一个输入框效果的更多相关文章

  1. vue中输入框聚焦，自动跳转下一个输入框

    比如 点击入库,el-dialog弹出来,然后自动聚焦第一个输入框,当输入框有值的时候,自动跳转下一个输入框 这个需求 直接上菜: this.$refs.lbj.focus()其实直接这么写也可以,但 ...

  2. 报表中经常遇到的一个头疼的问题是需要自动选择过去一个月的数据作为当前报表输出。网上查询了一些.NET 的C#例子，发现都实现的比较复杂

    报表中经常遇到的一个头疼的问题是需要自动选择过去一个月的数据作为当前报表输出.网上查询了一些.NET 的C#例子,发现都实现的比较复杂,其实这个问题可以很简单的通过.NET的DateTime函数来实现 ...

  3. 当input框输入到限定长度时，自动focus下一个input框

     需求背景 需要输入一串15位的数字,但是要分为3个输入框,每个输入框限定长度5位,当删除当前输入框的内容时,focus到上一个输入框: 实现方法 var field = $('.phone-fiel ...

  4. Linux CFS调度器之pick_next_task_fair选择下一个被调度的进程--Linux进程的管理与调度(二十八）

    1. CFS如何选择最合适的进程 每个调度器类sched_class都必须提供一个pick_next_task函数用以在就绪队列中选择一个最优的进程来等待调度, 而我们的CFS调度器类中, 选择下一个 ...

  5. 解决iPhone上select时常失去焦点，随意跳到下一个输入框，影响用户操作

    window.addEventListener('load', function() { FastClick.attach(document.body); }, false); //300s延迟,解决 ...

  6. [开发技巧]·HTML检测输入已完成自动填写下一个内容

    [开发技巧]·HTML检测输入已完成自动填写下一个内容 个人网站 --> http://www.yansongsong.cn 在上一个博客中简易实现检测输入已完成,我们实现了检测输入已完成,现在 ...

  7. JavaScript一个页面中有多个audio标签，其中一个播放结束后自动播放下一个，audio连续播放

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Android开发之EditText利用键盘跳转到下一个输入框

    以前做项目的时候,从来没考虑过这些.这段时间公司内部用的一款APP,就出现了这个问题,在登录或者注册的时候,点击键盘的回车按钮,可以跳到下一个输入框的功能,这个属性一直也没记住,今天就把自己一直没记过 ...

  9. 利用videojs自动播放下一个

    利用videojs自动播放下一个 一.总结 一句话总结: 在视频放完的ended方法里面,指定video的src,然后this.play()放视频就好 vue来控制视频的链接也是蛮不错的 this.o ...

随机推荐

  1. 【转】谁说Vim不是IDE？（一）

    谁说Vim不是IDE?(一)   话说操作系统.编程语言和编辑器似乎是程序员永恒的吐槽话题,技术发展了几十年,大家讨论起这几个“之争”还是充满愤怒.津津乐道.有人描述过Emacs和VI程序员,大家沿着 ...

  2. [T-SQL]从变量与数据类型说起

     1.变量 学习计算机语言,难免不碰到这个名词,不过咱这里说的是MSSQL(微软SQL Server产品)里的数据库语言实现. 稍微对程序比较严谨的语言都要求使用之前都要声明变量先,比如c.c++,j ...

  3. Struts中常用的几个技术

    Struts ognl表达式语言几个符号 #  获取非根元素值  . 动态都建map集合 $  配置文件取值 %  提供一个ognl表达式运行环境 代码示例一:在action类的一个方法中讲一个值存入 ...

  4. TREEVIEW拖拽对应修改目录

    附件:http://files.cnblogs.com/xe2011/TreeView_Drag_Directory%E6%93%8D%E4%BD%9C.rar     TREEVIEW拖拽对应修改目 ...

  5. hibernate中持久化对象的生命周期（三态：自由态，持久态，游离态 之间的转换）

    三态的基本概念: 1,  暂时状态(Transient):也叫自由态,仅仅存在于内存中,而在数据库中没有对应数据.用new创建的对象,它没有持久化,没有处于Session中,处于此状态的对象叫暂时对象 ...

  6. 在JBoss中部署GeoServer

    GeoServer一直就不能在 JBoss应用服务器中正常部署.最近我在一个国外的论坛上找到了该问题的解决方案.以下方法经测试,可以将GeoServer 2.1.3 成功部署在 JBoss 5.0 和 ...

  7. [Angular 2] DI in Angular 2 - 1

    Orgial aritial --> Link The problem with Angular 1 DI: Angular 2 DI: Solve the singletons problem ...

  8. iOS之ASIHttp简单的网络请求实现

    描述: ASIHttpRequest是应用第三方库的方法,利用代码快,减少代码量,提高效率 准备工作: 一.导入第三方库ASIHttpRequest 二.会报很多的错,原因有两个,一个是要导入Xcod ...

  9. mongnodb 启动脚本

    开始用mongodb建立一套监控体系,安装解压即可.附上编写的mongodb启动管理脚本. 建议 mkdir sbin 目录,放到sbin目录下.废话少说,代码如下: #!/bin/bash MONG ...

  10. python学习笔记--Django入门0 安装dangjo

    经过这几天的折腾,经历了Django的各种报错,翻译的内容虽然不错,但是与实际的版本有差别,会出现各种奇葩的错误.现在终于找到了解决方法:查看英文原版内容:http://djangobook.com/ ...