JS method to implement arrow keys to switch focus of input box

JS method to implement arrow keys to switch focus of input box_javascript skills

WBOY

Release： 2016-05-16 15:44:19

Original

1518 people have browsed it

The example in this article describes the method of using JS to switch the focus of the input box with the arrow keys. Share it with everyone for your reference. The details are as follows:

Here is the js direction key control to switch the input box focus effect, but it is not compatible with Firefox. When the input is completed, press Enter or press the arrow keys to move the focus to the text box you want to input without clicking the mouse. This function can improve the input speed when data is frequently entered.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/js-input-cha-focus-style-codes/

The specific code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JS方向键切换输入框焦点</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<table border="1" id="mm" onkeydown="keyDown(event)"> 
<tr> <td> <input> </td> <td> <input> </td> <td> <input> </td> <td> <input> </td> </tr> 
<tr> <td> <input> </td> <td> <input> </td> <td> <input> </td> <td> <input> </td> </tr> 
<tr> <td> <input> </td> <td> <input> </td> <td> <input> </td> <td> <input> </td> </tr> 
<tr> <td> <input> </td> <td> <input> </td> <td> <input> </td> <td> <input> </td> </tr> 
<tr> <td> <input> </td> <td> <input> </td> <td> <input> </td> <td> <input> </td> </tr> 
</table> 
<script language="javascript" type="text/javascript"> 
<!-- 
var inputs=document.getElementById("mm").getElementsByTagName("INPUT"); 
function keyDown(event) 
{ 
 var focus=document.activeElement; 
 if(!document.getElementById("mm").contains(focus)) return; 
 var event=window.event||event;
 var key=event.keyCode; 
 for(var i=0; i<inputs.length; i++) 
 { 
  if(inputs[i]===focus) break; 
 } 
 switch(key) 
 { 
  case 37: 
   if(i>0) inputs[i-1].focus(); 
   break; 
  case 38: 
   if(i-4>=0) inputs[i-4].focus(); 
   break; 
  case 39: 
   if(i<inputs.length-1) inputs[i+1].focus(); 
   break; 
  case 40: 
   if(i+4 <inputs.length) inputs[i+4].focus(); 
   break; 
 } 
} 
//--> 
</script> 
</body>
</html>

Copy after login

I hope this article will be helpful to everyone’s JavaScript programming design.