Heim > Artikel > Web-Frontend > JS-Methode zum Implementieren von Pfeiltasten zum Wechseln des Fokus der Eingabebox_Javascript-Fähigkeiten

JS-Methode zum Implementieren von Pfeiltasten zum Wechseln des Fokus der Eingabebox_Javascript-Fähigkeiten

WBOYOriginal: 2016-05-16 15:44:191486Durchsuche

Das Beispiel in diesem Artikel beschreibt die Methode, mit JS den Fokus des Eingabefelds mit den Pfeiltasten zu ändern. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Hier ist die js-Richtungstastensteuerung zum Umschalten des Eingabefeld-Fokuseffekts, sie ist jedoch nicht mit Firefox kompatibel. Wenn die Eingabe abgeschlossen ist, drücken Sie die Eingabetaste oder drücken Sie die Pfeiltasten, um den Fokus auf das Textfeld zu verschieben, das Sie eingeben möchten, ohne mit der Maus zu klicken. Diese Funktion kann die Eingabegeschwindigkeit verbessern, wenn häufig Daten eingegeben werden.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

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

Der spezifische Code lautet wie folgt:

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

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：js-Methode zum Implementieren eines Textfelds zur Unterstützung von Additions- und Subtraktionsoperationen_Javascript-FähigkeitenNächster Artikel：js-Methode zum Implementieren eines Textfelds zur Unterstützung von Additions- und Subtraktionsoperationen_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen