집 > 기사 > 웹 프론트엔드 > 입력 box_javascript 기술의 초점을 전환하기 위해 화살표 키를 구현하는 JS 방법

입력 box_javascript 기술의 초점을 전환하기 위해 화살표 키를 구현하는 JS 방법

WBOY원래의: 2016-05-16 15:44:191528검색

이 글의 예시에서는 JS를 사용하여 화살표 키로 입력 상자의 포커스를 전환하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

다음은 입력 상자 포커스 효과를 전환하는 js 방향 키 컨트롤이지만 Firefox와 호환되지 않습니다. 입력이 완료되면 Enter 키를 누르거나 방향키를 눌러 마우스를 클릭하지 않고도 입력하려는 텍스트 상자로 포커스를 이동할 수 있습니다. 이 기능은 데이터를 자주 입력할 때 입력 속도를 향상시킬 수 있습니다.

런닝 효과 스크린샷은 다음과 같습니다.

온라인 데모 주소는 다음과 같습니다.

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

구체적인 코드는 다음과 같습니다.

<!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>

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.

성명：

이전 기사：덧셈과 뺄셈 연산을 지원하는 텍스트 상자를 구현하는 js 메소드_javascript 기술다음 기사：덧셈과 뺄셈 연산을 지원하는 텍스트 상자를 구현하는 js 메소드_javascript 기술

입력 box_javascript 기술의 초점을 전환하기 위해 화살표 키를 구현하는 JS 방법

관련 기사