点击enter回车键实现表单元素切换焦点效果

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了点击enter回车键实现表单元素切换焦点效果相关的知识,希望对你有一定的参考价值。

点击enter回车键实现表单元素切换焦点效果:
现在网站都比较追求人性化,比如填写表单的时候,能够实现点击回车就可以切换表单元素的焦点,这样比使用鼠标进行切换更能让人接受,下面就通过代码实例介绍一下如何实现此功能。
代码如下:

<!DOCTYPE html>     
<html>     
<head>     
<meta charset=" utf-8">     
<meta name="author" content="http://www.softwhy.com/" />     
<title>蚂蚁部落</title>  
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(function(){
  $(#theform input:text:first).focus();
  var $inp=jQuery(#theform input:text);
  $inp.bind(keydown,function(e){
    var key=e.which;
    if(key==13) {
      e.preventDefault();
      var nxtIdx=$inp.index(this)+1;
      $(":input:text:eq("+nxtIdx+")").focus();
    }
  });
});
</script> 
</head> 
<body> 
<form action="#" id="theform">
<input type="text" name="one"/>
<input type="text" name="two"/>
<input type="text" name="three"/>
</form> 
</body> 
</html>

以上代码实现了我们的要求,点击回车键就可以实现切换文本框的焦点效果,下面介绍一下它的实现过程。
一.代码注释:
1.$(function(){}),当文档结构加载完毕再去执行函数中的代码。
2.$(‘#theform input:text:first‘).focus(),使表单中的第一个文本框获取焦点。
3.var $inp=jQuery(‘#theform input:text‘),获取表单元素下的所有文本框元素集合。
4.$inp.bind(‘keydown‘,function(e){}),为文本框注册keydown事件处理函数。
5.var key=e.which,获取按下键或者按钮的键位序号。
6.if(key==13),当key值等于13的时候表示按下的是回车键。
7.e.preventDefault(),组织点击回车的默认值。
8.var nxtIdx=$inp.index(this)+1,获取下一个元素的索引值。
9.(":input:text:eq("+nxtIdx+")").focus(),使下一个表单元素获取焦点。
二.相关阅读:
1.:text选择器可以参阅jQuery的:text选择器一章节。
2.:first选择器可以参阅jQuery的:first选择器一章节。
3.focus()函数可以参阅jQuery的focus事件一章节。
4.bind()函数可以参阅jQuery的bind()方法一章节。
5.keydown事件可以参阅jQuery的keydown事件一章节。 
6.e.which属性可以参阅jQuery的event.which属性一章节。
7.e.preventDefault()函数可以参阅jQuery的event.preventDefault()方法一章节。 
8.index()函数可以参阅jQuery的index()方法一章节。
9.:eq()可以参阅jQuery的:eq()选择器一章节。

 

以上是关于点击enter回车键实现表单元素切换焦点效果的主要内容,如果未能解决你的问题,请参考以下文章

enter回车---焦点切换

为JQuery EasyUI 表单组件增加“焦点切换”功能

html表单 - 按下回车时自动按钮焦点

移动端 input 获取焦点后弹出带enter(类似于搜索,确定,前往)键盘,以及隐藏系统键盘

Android开发中EditText的点击Enter键焦点改变处理(获取焦点和失去焦点交互变化)

vue.js中 ,回车键实现登录或者提交表单!