js按回车键聚焦下一个控件。

方式一: 判断 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>

猜你喜欢

转载自blog.csdn.net/qq_38719039/article/details/82658557