js按回车实现tab效果（下一个控件获取焦点）

原创

day_day_up_cium 2021-07-13 16:28:37 ©著作权

文章标签 前端 文章分类 前端开发

©著作权归作者所有：来自51CTO博客作者day_day_up_cium的原创作品，请联系作者获取转载授权，否则将追究法律责任

方式一：判断 event.keyCode==13 回车行为，下一个控件聚焦。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <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> 
	 <tr><td>姓名：<input type="text" onkeypress="if(event.keyCode==13) focusNextInput(this);"></td></tr>
	 <tr><td>年龄：<input type="text" onkeypress="if(event.keyCode==13) focusNextInput(this);"></td></tr>
	 <tr><td>工号：<input type="text" onkeypress="if(event.keyCode==13) focusNextInput(this);"></td></tr>
	 <tr><td>部门：<input type="text" onkeypress="if(event.keyCode==13) focusNextInput(this);"></td></tr>
	 <tr><td>工位：<input type="text" onkeypress="if(event.keyCode==13) focusNextInput(this);"></td></tr>
	 <tr><td>机构：<input type="text" onkeypress="if(event.keyCode==13) focusNextInput(this);"></td></tr> 
</table>
</body>
</html>

方式二：给控件添加属性、添加触发事件。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script type="text/javascript"> 
	window.onload=function(){ 
		var list = new Array(); 
		for(var i=5;i<document.all.length; i++){
			if(document.all[i].type=="text"||document.all[i].tagName=="SELECT") 
			list.push(i);
		}
        
		for(var i=0;i<list.length-1;i++){
			document.all[list[i]].setAttribute("nextFocusIndex",list[i+1]); 
			document.all[list[i]].onkeydown=JumpToNext;
		}
        
		for(var i=list.length-1;i<document.all.length;i++){
			if(document.all[i].type=="button"){ 
				document.all[list[list.length-1]].setAttribute("nextFocusIndex",i); 
				document.all[list[list.length-1]].onkeydown=JumpToNext;
				break;
			}
		}
		document.all[list[0]].focus();
	}
    
	function JumpToNext(){
		if(event.keyCode==13){
			var nextFocusIndex = this.getAttribute("nextFocusIndex");
			document.all[nextFocusIndex].focus();
		}
	}
	</script> 
</head> 
<body> 
	<input id="A" name="A" type="text" /> 
	<input id="B" name="B" type="text" /> 
	<input id="C" name="C" type="text" /> 
	<input id="D" name="D" type="text" /> 
	<input id="E" name="E" type="text" /> 
	<select id="S1" name="S1"> 
	<option>1</option> 
	<option>2</option> 
	<option>3</option> 
	<option>4</option> 
	<option>5</option> 
	</select> 
	<select id="S2" name="S2"> 
		<option>1</option> 
		<option>2</option> 
		<option>3</option> 
		<option>4</option> 
    </select> 
 </body>
</html>