关闭

js实现input输入框按回车键后光标跳到下一个输入框

时间: 2018-02-13阅读: 11734标签: 光标

html页面中有多个input 输入框,如何通过原生js或者jquery怎么实现:按回车键光标自动移动到下一个输入框。

 

1.原生js实现:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk">
    <script type="text/JavaScript">
      function focusNextInput(thisInput){
          var inputs = document.getElementsByTagName("input");
          for(var i = 0;i<inputs.length;i++){
            // 如果是最后一个,则焦点回到第一个
            if(i==(inputs.length-1)){
              inputs[0].focus();
              break;
            }else if(thisInput == inputs[i]){
              inputs[i+1].focus();
              break;
            }
          }
      }  
    </script>
  </head>
<body>
  <table>
    姓名:<input type="text" onkeypress="if(event.keyCode==13) focusNextInput(this);">
    年龄:<input type="text" onkeypress="if(event.keyCode==13) focusNextInput(this);">
    工号:<input type="text" onkeypress="if(event.keyCode==13) focusNextInput(this);">
  </table>
</body>
</html>


2.Jquery实现:

/**
 * 回车时跳转到下一个元素
 * @Author   HTL
 * @DateTime  2016-12-30T11:33:25+0800
 * @param     {[type]}                 $input [INPUT 元素列表]
 * @return    {[type]}                        [description]
 */
function keydown_to_tab($input){
  if(!$input) $input = $('input:text:not(:disabled)');
  $input.bind("keydown", function(e) {
    var n = $input.length;
    if (e.which == 13){
          e.preventDefault(); //Skip default behavior of the enter key
          var nextIndex = $input.index(this) + 1;
          if(nextIndex < n)
              $input[nextIndex].focus();
          else
              $input[nextIndex-1].blur();
    }
  });
}


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/434

关闭

在textarea和input光标处插入内容,支持ie

项目需求,用户要能够输入和点击外面的公式去插入到textaera中,试了好几种方法,有的是在谷歌下好使,在ie下不好使,最后找到了下面这个方法,目前在ie8以上都可以生效。直接上代码

CSS中cursor 鼠标指针光标样式(形状)

在前端开发中,我们经常需要对对象鼠标指针光标进行控制,比如鼠标经过超链接时变成手指形状。在这里整理一下cursor鼠标指针光标样式的知识,记录与方便以后查找。

js光标定位操作

打开网页后将光标定位到某个Text文本框中 ;打开网页后Text文本框内已经有了从数据库里读出来的内容,需要将光标定位到这个Text某个字符后面,要将光标定位到冒号后面(不分中文或英文输入法),如果内容中没有冒号就就光标定位到最前面

html5中contenteditable 光标_如何设置光标位置

在contenteditable 属性中,当点击该区域的时候,光标默认显示在区域内容最后一位,如果我们需要打开页面默认就出现,而且出现在第一个位置上,该如何实现呢?下面将给出js的实现方法。

html元素contenteditable属性如何定位光标和设置光标

废话不多说了,我们先来理解一下HTML的光标对象是如何工作的,后面我会贴完整的DEMO代码,不用急,先去理解,才能做出更加好的输入体验。在HTML里面,光标是一个对象,光标对象是只有当你选中某个元素的时候才会出现的。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!