<!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. 了解mongodb

    本文大纲 基础了解mongodb(mongodb介绍,跟其他nosql区别,跟内存服务器区别等,使用场景) 在使用前,强力建议看哈http://wenku.baidu.com /link?url=lu ...

  2. indexOf()不区分大小写用法

    str.toLowerCase().indexOf(str.toLowerCase())>=0; 对字符串进行统一小写转换. indexOf()查找到返回索引值大于=0; 未找到,返回-1; i ...

  3. IO 流—>>>补充

    流操作规律: 示例:1. 源: 键盘录入 目的: 控制台 2.源:文件 目的:控制台 3.源: 键盘录入 目的: 文件 基本规律: 面对流对象很多,不知道用哪一个的时候: 通过两个明确来完成 1.明确 ...

  4. ByteBuffer使用之道

    缓冲区分配和包装  在能够读和写之前,必须有一个缓冲区,用静态方法 allocate() 来分配缓冲区:  ByteBuffer buffer = ByteBuffer.allocate(1024); ...

  5. CAS协议 - CAS URIs

    http://desert3.iteye.com/blog/1703449 2.CAS URIs:  CAS是一个基于HTTP的协议,这就要求其每一个组成部分可以通过特定的URIs访问到.所有相关的U ...

  6. 经典SQL语句大全之数据开发

    数据开发 1.按姓氏笔画排序:Select * From TableName Order By CustomerName Collate Chinese_PRC_Stroke_ci_as //从少到多 ...

  7. PHP内核探索之变量（1）变量的容器-Zval

    http://blog.csdn.net/ohmygirl/article/details/41542445

  8. Yet Another 10 Common Mistakes Java Developers Make When Writing SQL (You Won’t BELIEVE the Last One)--reference

    (Sorry for that click-bait heading. Couldn’t resist ;-) ) We’re on a mission. To teach you SQL. But ...

  9. VC++判断是否连网

    在开发中,需要判断是否有网络连接,于是写了个函数,实现代码如下: //判断是否有网络连接 static BOOL DoHaveInternetConnection() { BOOL bRet = FA ...

  10. MY_FAVOR_火埃及