夏日博客

A-A+

js/jquery实现回车键切换输入框焦点代码

2016年01月07日 前端设计 暂无评论 阅读 5 views 次

用JavaScript实现回车键切换输入框焦点的功能,不是回车换行哦,在Textarea中,回车换行是默认功能,不过若要在textarea中使用回车切换输入框焦点功能的话,回车换行就要失效了,不过input对象可以用,一般在表单中,input元素是比较多的,下面来个例子,代码如下:

  1. <script type="text/javascript">  
  2. function handleEnter (field, event) {  
  3. var keyCode = event.keyCode ? event.keyCode : event.which ?  
  4. event.which : event.charCode;  
  5. if (keyCode == 13) {  
  6. var i;  
  7. for (i = 0; i < field.form.elements.length; i++)  
  8. if (field == field.form.elements[i])  
  9. break;  
  10. i = (i + 1) % field.form.elements.length;  
  11. field.form.elements[i].focus();  
  12. return false;  
  13. }  
  14. else  
  15. return true;  
  16. }  
  17. </script>  

这样来使用上面的Js代码,代码如下:

  1. <form>  
  2. <input type="text" onkeypress="return handleEnter(this, event)"><br>  
  3. <input type="text" onkeypress="return handleEnter(this, event)"><br>  
  4. <textarea onkeypress="return handleEnter(this, event)">回车切换焦点</textarea>  
  5. </form>  

jquery例子

实现步骤如下:

1、首先引用Jquery类库

  1. <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>  

2、Javascript代码,代码如下:

  1. <script type="text/javascript">  
  2.         $(function () {  
  3.         $('input:text:first').focus();  
  4.         var $inp = $('input:text');  
  5.         $inp.bind('keydown', function (e) {  
  6.             var key = e.which;  
  7.             if (key == 13) {  
  8.                 e.preventDefault();  
  9.                 var nxtIdx = $inp.index(this) + 1;  
  10.                 $(":input:text:eq(" + nxtIdx + ")").focus();  
  11.             }  
  12.         });  
  13.     });  
  14.     </script>  

分析:

  1. $('input:text:first').focus();  

页面初始化时，焦点定位第一个文本框内

  1. var $inp = $('input:text');  

取的type=文本框的元素集合

  1. $inp.bind('keydown', function (e) {}  

给文本框集合绑定'keydown'事件

  1. var key = e.which;  

取的当前按下的键值 比如Enter的键值=13

e.preventDefault();

标签：

给我留言