<!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. Shell函数：Shell函数返回值、删除函数、在终端调用函数

    函数可以让我们将一个复杂功能划分成若干模块,让程序结构更加清晰,代码重复利用率更高.像其他编程语言一样,Shell 也支持函数.Shell 函数必须先定义后使用. Shell 函数的定义格式如下: f ...

  2. Asp.Net Design Pattern Studynotes -- Part1

    Asp.Net Design Pattern Studynotes -- Part1 let's start with an exampleto entry amazing OO world ! le ...

  3. 关于附件控件隐藏后，在IE下不能上传，报“拒绝访问”

    报错时的使用: @Html.TextBoxFor(m => m.FileName, new { style = "width:457px;", @readonly = &qu ...

  4. myEclipse和eclipse修改或复制项目名称后-更新部署名称

    一.myEclipse 复制后修改名称,访问不到项目 这是因为,你只是改了项目的名称,而没有改 下面是解决方法: 方法 1.右击你的项目,选择“properties”,在“type filter te ...

  5. 解决拦截器对ajax请求的的拦截

    拦截器配置: public boolean preHandle(HttpServletRequest request, HttpServletResponse response,Object obj) ...

  6. android3.2以上切屏禁止onCreate()

    一般切屏禁止onCreate()方法需要将activity加上属性: android:configChanges=”orientation|keyboardHidden” 但是在3.2以上就不起作用了 ...

  7. [Webpack 2] Maintain sane file sizes with webpack code splitting

    As a Single Page Application grows in size, the size of the payload can become a real problem for pe ...

  8. ffprobe使用具体解释

    夹 1. 语法 2. 描写叙述 3. 选项 3.1 流指示符 3.2 通用选项 3.3 音视频选项 3.4 主选项 4. 写入器 4.1 默认值 4.2 compact, csv 4.3 flat 4 ...

  9. 用tsung测试openfire 服务器性能

    最近公司需要做一个有聊天功能的应用,客户讲的是很宏大,用户超多,以前搞过openfire,但没有深入的去了解,就想用它来搞,而且是用 java写的,想扩展也容易些,但在性能上一直担忧,想测试一下它的性 ...

  10. bitset使用

    17.10使用序列1.2.3.5.8.13.21初始化一个bitset,将这些位置置位.对另一个bitset进行默认初始化,并编写一小段程序将其恰当的位置位. #include<iostream ...