js pour implémenter les touches haut, bas, gauche et droite du clavier pour sélectionner du texte et l'afficher dans la zone de texte

Maison

interface Web

js tutoriel

js pour implémenter les touches haut, bas, gauche et droite du clavier pour sélectionner du texte et l'afficher dans la zone de texte_javascript skills

May 16, 2016 pm 04:00 PM

js 文本框键盘

L'exemple de cet article décrit la méthode js d'implémentation des touches haut, bas, gauche et droite du clavier pour sélectionner du texte et l'afficher dans la zone de texte. Partagez-le avec tout le monde pour votre référence. La méthode de mise en œuvre spécifique est la suivante :

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
&lt;title&gt;SimulateUpDownKeySelect.html&lt;/title&gt;
&lt;style type="text/css"&gt;
#divSelect {border:1px solid red; width:208px !important;width:210px;}
#divSelect ul {width:200px;margin:3px; margin-left:-35px;*margin-left:3px;overflow:hidden}
#divSelect ul li {float:left; list-style-type:none;width:45px;height:14px;line-height:20px;font:14px arial;text-align:center;padding:2px}
#divSelect li:hover {background :green;cursor:pointer}
#txtInput {width:205px;}
&lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
&lt;form method="post" action="##"&gt;
&lt;input type="text" id="txtInput" value="" autocomplete="off" onkeydown="if(event.keyCode==13)return false;" /&gt;
&lt;!--
防止回车键触发表单提交
onKeyPress
--&gt;
&lt;div id="divSelect"&gt;
&lt;/div&gt;
&lt;script type="text/javascript"&gt;
var list="&lt;ul&gt;"
list+="&lt;li&gt;科幻片&lt;/li&gt;&lt;li&gt;战争片&lt;/li&gt;&lt;li&gt;动作片&lt;/li&gt;&lt;li&gt;爱情片&lt;/li&gt;&lt;li&gt;剧情片&lt;/li&gt;&lt;li&gt;记录片&lt;/li&gt;&lt;li&gt;综艺片&lt;/li&gt;&lt;li&gt;喜剧片&lt;/li&gt;&lt;li&gt;动画片&lt;/li&gt;&lt;li&gt;励志片&lt;/li&gt;&lt;li&gt;恐怖片&lt;/li&gt;&lt;li&gt;古装片&lt;/li&gt;&lt;li&gt;电视剧&lt;/li&gt;&lt;li&gt;读书&lt;/li&gt;&lt;li &gt;小说&lt;/li&gt;&lt;li&gt;作品集&lt;/li&gt;&lt;li&gt;历史&lt;/li&gt;&lt;li&gt;诗歌&lt;/li&gt;&lt;li &gt;散文&lt;/li&gt;&lt;li&gt;军事&lt;/li&gt;";
list+="&lt;/ul&gt;"
document.getElementById('divSelect').innerHTML=list;
&lt;/script&gt;
&lt;/form&gt;
&lt;script type="text/javascript"&gt;
&lt;!--
function $(sId)
{
  return document.getElementById(sId);
}
function clearSelectedOptBgColor(target)
{
  if (target.seletedIndex &gt;= 0)
    target.options[target.seletedIndex].style.background = "";
}
function setSelectedOptBgColor(target)
{
  target.options[target.seletedIndex].style.background = "green";
}
var upKeyCode = 38;
var downKeyCode = 40;
var enterKeyCode = 13;
var oInput = $("txtInput");
oInput.options = $("divSelect").getElementsByTagName("li");
oInput.seletedIndex = -1;
oInput.focus();
//oInput.onKeyPress{}
oInput.onkeyup = function(event){
  if (event == undefined)
    event = window.event;
  switch (event.keyCode)
  {
    case 37:
      clearSelectedOptBgColor(this);
      this.seletedIndex--;
      if (this.seletedIndex &lt; 0)
        this.seletedIndex = this.options.length - 1;
 this.value = this.options[this.seletedIndex].innerHTML;
      setSelectedOptBgColor(this);
      break;
      case 38:
      clearSelectedOptBgColor(this);
      this.seletedIndex= this.seletedIndex-4;
      if (this.seletedIndex &lt; 0)
        this.seletedIndex = this.options.length - 1;
 this.value = this.options[this.seletedIndex].innerHTML;
      setSelectedOptBgColor(this);
      break;
    case 39:
      clearSelectedOptBgColor(this);
      this.seletedIndex++;
      if (this.seletedIndex &gt;= this.options.length)
        this.seletedIndex = 0;
      this.value = this.options[this.seletedIndex].innerHTML;
      setSelectedOptBgColor(this);
      break;
      case 40:
      clearSelectedOptBgColor(this);
      this.seletedIndex= this.seletedIndex+4;
      if (this.seletedIndex &gt;= this.options.length)
        this.seletedIndex = 0;
      this.value = this.options[this.seletedIndex].innerHTML;
      setSelectedOptBgColor(this);
      break;
     case enterKeyCode:
      this.value = this.options[this.seletedIndex].innerHTML;
      //alert('aa')
      break;
  }
};
oInput.onblur = function(){
  clearSelectedOptBgColor(this);
  this.seletedIndex = 1;
};
//--&gt;
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

Repo: Comment relancer ses coéquipiers

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Combien de temps faut-il pour battre Split Fiction?

3 Il y a quelques semaines By DDD

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)

1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: Comment obtenir des graines géantes

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Difficulté à mettre à jour la mise en cache des pages Web officielles du compte: comment éviter l'ancien cache affectant l'expérience utilisateur après la mise à jour de la version?

3 Il y a quelques semaines By 王林

Afficher plus

Outils chauds Tags

Code&IT

Voix

Entreprise

Commercialisation

Détecteur d'IA

Chatbot

Conception et art

Article chaud

Repo: Comment relancer ses coéquipiers

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Combien de temps faut-il pour battre Split Fiction?

3 Il y a quelques semaines By DDD

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)

1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: Comment obtenir des graines géantes

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Difficulté à mettre à jour la mise en cache des pages Web officielles du compte: comment éviter l'ancien cache affectant l'expérience utilisateur après la mise à jour de la version?

3 Il y a quelques semaines By 王林

Afficher plus

Tags d'article chaud

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7288

Tutoriel Java

1622

Tutoriel CakePHP

1342

Tutoriel Laravel

1259

Tutoriel PHP

1206

Afficher plus

Related knowledge

Comment taper souligné sur le clavier ? Comment taper uniquement souligner sans taper ? Feb 22, 2024 pm 07:46 PM

Comment taper souligné sur le clavier ? Comment taper uniquement souligner sans taper ?

Comment ouvrir le menu contextuel via les touches de raccourci Jan 14, 2024 pm 03:12 PM

Comment ouvrir le menu contextuel via les touches de raccourci

Saisie automatique du clavier sur un ordinateur portable Windows Feb 19, 2024 pm 05:33 PM

Saisie automatique du clavier sur un ordinateur portable Windows

Comment attribuer des boutons Copilot sur n'importe quel clavier dans Windows 11 Feb 20, 2024 am 10:33 AM

Comment attribuer des boutons Copilot sur n'importe quel clavier dans Windows 11

Les produits de la série de claviers et de souris « Elden's Circle » co-marqués par VGN sont désormais sur les étagères : thème personnalisé Lani / Faded One, à partir de 99 yuans Aug 12, 2024 pm 10:45 PM

Les produits de la série de claviers et de souris « Elden's Circle » co-marqués par VGN sont désormais sur les étagères : thème personnalisé Lani / Faded One, à partir de 99 yuans

Comment définir le skin du clavier WeChat Comment définir le skin du clavier WeChat Mar 13, 2024 am 09:04 AM

Comment définir le skin du clavier WeChat Comment définir le skin du clavier WeChat

Le clavier mécanique à trois modes Maicong K87 ajoute les versions « axe jacinthe » et « axe crème glacée » : structure de joint, le prix initial commence à 299 yuans Feb 29, 2024 pm 05:00 PM

Le clavier mécanique à trois modes Maicong K87 ajoute les versions « axe jacinthe » et « axe crème glacée » : structure de joint, le prix initial commence à 299 yuans

Comment changer la disposition du clavier du système Ubuntu en clavier américain ? Jan 12, 2024 pm 12:39 PM

Comment changer la disposition du clavier du système Ubuntu en clavier américain ?

See all articles