码上敲享录 > js常见问题解答 > 按enter键焦点自动跳到下一个输入框或者下拉select框

按enter键焦点自动跳到下一个输入框或者下拉select框

上一章章节目录下一章 2018-07-04已有6810人阅读 评论(0)

按enter键焦点自动跳到下一个输入框或者下拉select框

解决方法:

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<script src="
https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(function(){
var inputs = $("input[type='text'],select");
       inputs.keydown(function (e) {
           var k = e.keyCode;
           //var a = $.inArray(this,inputs);//jquery 获取数组元素的下标
           var a=inputs.index($(this));//jquery 获取数组元素的下标,两种方法
           if (k == 13 || k == 39 ) {
               inputs[a+1].focus();
               return false;
           } else if (k == 37) {
               inputs[a-1].focus();
           }
       })

})
</script>
</head>
<body>
<input type="text">
       <select name="select1" id="select1"
               onfocus="this.size=this.length;"
               onclick="this.size='1';"
               onblur="this.size='1';"
               style="width:45px;position:absolute;top:10px;">
           <option selected="selected" value="1">1</option>  
           <option value="2">2</option>  
           <option value="3">3</option>  
           <option value="4">4</option>  
         
       </select>  
<br/>
   &nbsp;<input style="margin-left:100px;" type="text">
</body>

</html>


本文地址:http://yayihouse.com/yayishuwu/chapter/1324

向大家推荐《Activiti工作流实战教程》:https://xiaozhuanlan.com/activiti
7

有建议,请留言!

  • *您的姓名:

  • *所在城市:

  • *您的联系电话:

    *您的QQ:

  • 咨询问题:

  • 提 交