js untuk melaksanakan kekunci atas, bawah, kiri dan kanan papan kekunci untuk memilih teks dan memaparkannya dalam kotak teks kemahiran

Rumah

tutorial js

js untuk melaksanakan kekunci atas, bawah, kiri dan kanan papan kekunci untuk memilih teks dan memaparkannya dalam kotak teks kemahiran_javascript

May 16, 2016 pm 04:00 PM

js kotak teks papan kekunci

Contoh dalam artikel ini menerangkan kaedah js untuk melaksanakan kekunci atas, bawah, kiri dan kanan pada papan kekunci untuk memilih teks dan memaparkannya dalam kotak teks. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut:

&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;

Salin selepas log masuk

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Panas

Repo: Cara menghidupkan semula rakan sepasukan

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?

3 minggu yang lalu By DDD

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

1 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: Cara mendapatkan biji gergasi

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi?

3 minggu yang lalu By 王林

Tunjukkan Lagi

Alat panas Tag

Kod&IT

Suara

Perniagaan

Pemasaran

Pengesan AI

Chatbot

Reka bentuk&Seni

Artikel Panas

Repo: Cara menghidupkan semula rakan sepasukan

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?

3 minggu yang lalu By DDD

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

1 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: Cara mendapatkan biji gergasi

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi?

3 minggu yang lalu By 王林

Tunjukkan Lagi

Tag artikel panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7288

Tutorial Java

1622

Tutorial CakePHP

1342

Tutorial Laravel

1259

Tutorial PHP

1206

Tunjukkan Lagi

Related knowledge

Bagaimana untuk menaip garis bawah pada papan kekunci Bagaimana untuk menaip garis bawah sahaja tanpa menaip? Feb 22, 2024 pm 07:46 PM

Bagaimana untuk menaip garis bawah pada papan kekunci Bagaimana untuk menaip garis bawah sahaja tanpa menaip?

Bagaimana untuk membuka menu klik kanan melalui kekunci pintasan Jan 14, 2024 pm 03:12 PM

Bagaimana untuk membuka menu klik kanan melalui kekunci pintasan

Auto-taip papan kekunci pada komputer riba Windows Feb 19, 2024 pm 05:33 PM

Auto-taip papan kekunci pada komputer riba Windows

Bagaimana untuk menetapkan butang Copilot pada mana-mana papan kekunci dalam Windows 11 Feb 20, 2024 am 10:33 AM

Bagaimana untuk menetapkan butang Copilot pada mana-mana papan kekunci dalam Windows 11

Produk siri papan kekunci dan tetikus 'Elden's Circle' jenama bersama VGN kini berada di rak: Tema tersuai Lani / Faded One, bermula dari 99 yuan Aug 12, 2024 pm 10:45 PM

Produk siri papan kekunci dan tetikus 'Elden's Circle' jenama bersama VGN kini berada di rak: Tema tersuai Lani / Faded One, bermula dari 99 yuan

Bagaimana untuk menetapkan kulit untuk papan kekunci WeChat Bagaimana untuk menetapkan kulit untuk papan kekunci WeChat Mar 13, 2024 am 09:04 AM

Bagaimana untuk menetapkan kulit untuk papan kekunci WeChat Bagaimana untuk menetapkan kulit untuk papan kekunci WeChat

Papan kekunci mekanikal tiga mod Maicong K87 menambah versi 'paksi gondok' dan 'paksi ais krim': Struktur gasket, harga permulaan bermula pada 299 yuan Feb 29, 2024 pm 05:00 PM

Papan kekunci mekanikal tiga mod Maicong K87 menambah versi 'paksi gondok' dan 'paksi ais krim': Struktur gasket, harga permulaan bermula pada 299 yuan

Bagaimana untuk menukar susun atur papan kekunci sistem Ubuntu kepada papan kekunci Amerika? Jan 12, 2024 pm 12:39 PM

Bagaimana untuk menukar susun atur papan kekunci sistem Ubuntu kepada papan kekunci Amerika?

See all articles