<!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. poj 1193 内存分配

    好麻烦的模拟题,一次性过了就好!!!不过用了两天哦.. 小伙伴们慢慢做哦. #include <iostream> #include <list> #include <q ...

  2. hdu 4712 (随机算法)

    第一次听说随机算法,在给的n组数据间随机取两个组比较,当随机次数达到一定量时,答案就出来了. #include<stdio.h> #include<stdlib.h> #inc ...

  3. radix树

    今天在学Linux内核页高速缓存时,学到了一种新的数据结构radix树(基数),经过分析,感觉此数据结构有点鸡肋,有可能是我理解不到位吧. 先来张图,给大家以直观的印象 当有一个key-value型的 ...

  4. 375. Guess Number Higher or Lower II

    最后更新 四刷? 极大极小算法..还是叫极小极大的.. 首先要看怎么能保证赢. 比如2个数,猜第一个猜第二个都能保证下一轮我们赢定了,为了少交钱,我们猜小的. 比如3个数,猜第二个才能保证下一轮再猜一 ...

  5. DiscreteSeekBar---->SeekBar的使用

    build: compile 'org.adw.library:discrete-seekbar:1.0.0' 在布局中的使用: <org.adw.library.widgets.discret ...

  6. 解决jquery animate({scrollTop$pos},500)与$(window).scroll方法冲突的问题

    当点击节点时 先移除$(window).on("scroll")监听事件 在animate动画结束之后再添加上 $('#J_tab li').on('click', functio ...

  7. Java多线程编程的常见陷阱(转)

    Java多线程编程的常见陷阱 2009-06-16 13:48 killme2008 blogjava 字号:T | T 本文介绍了Java多线程编程中的常见陷阱,如在构造函数中启动线程,不完全的同步 ...

  8. myeclipse building workspace如何禁止及提高myeclipse速度

    大家一定对building workspace时那缓慢的速度给困扰到了吧~ 其实只要把project选项里的 building automatically前的勾去掉,就可以快很多了.. 另外大家一定对 ...

  9. 如何使用VIM的Help

    很多时候在用到vim的命令的时候,都会去网上搜索,殊不知,如果熟练使用VIM的help,可以达到事半功倍的效果. 下面介绍如何使用VIM的help: 1.      在vim的一般模式中输入:help ...

  10. Ebean Demo

    ebean  orm框架,其作者觉得hibernate的bean管理会话管理.难以在短时间明确,就自己搞了一套,就成了如今的ebean. ebean被一些开发人员这觉得是一把瑞士军刀.能够看出一些程序 ...