js實作鍵盤上下左右鍵選擇文字並顯示在文字方塊的方法_javascript技巧
本文實例講述了js實現鍵盤上下左右鍵選擇文字並顯示在文字方塊的方法。分享給大家供大家參考。具體實作方法如下：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>SimulateUpDownKeySelect.html</title>
<style type="text/css">
#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;}
</style>
</head>
<body>
<form method="post" action="##">
<input type="text" id="txtInput" value="" autocomplete="off" onkeydown="if(event.keyCode==13)return false;" />
<!--
防止回车键触发表单提交
onKeyPress
-->
<div id="divSelect">
</div>
<script type="text/javascript">
var list="<ul>"
list+="<li>科幻片</li><li>战争片</li><li>动作片</li><li>爱情片</li><li>剧情片</li><li>记录片</li><li>综艺片</li><li>喜剧片</li><li>动画片</li><li>励志片</li><li>恐怖片</li><li>古装片</li><li>电视剧</li><li>读书</li><li >小说</li><li>作品集</li><li>历史</li><li>诗歌</li><li >散文</li><li>军事</li>";
list+="</ul>"
document.getElementById('divSelect').innerHTML=list;
</script>
</form>
<script type="text/javascript">
<!--
function $(sId)
{
return document.getElementById(sId);
}
function clearSelectedOptBgColor(target)
{
if (target.seletedIndex >= 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 < 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 < 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 >= 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 >= 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;
};
//-->
</script>
</body>
</html>希望本文所述對大家的javascript程式設計有所幫助。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
底線在鍵盤上怎麼打 如何不打字只打底線
Feb 22, 2024 pm 07:46 PM
將輸入法調至英文後按住Shift鍵和減號鍵即可。教學適用型號：聯想AIO520C系統：Windows10專業版版本：MicrosoftOfficeWord2022解析1先檢查輸入法的中英文打字，調整至英文。 2然後同時按住鍵盤上的Shift鍵和減號鍵。 3檢查介面，即可查看已打出的底線。補充：Word文件如何快速輸入底線1如果需要在Word中輸入下劃線，用滑鼠選取空格後，選擇字體選單中選擇底線類型即可輸入。總結/注意事項一定要先將輸入法換至英文再進行操作，否則無法成功輸入底線。
如何透過快捷鍵開啟右鍵選單
Jan 14, 2024 pm 03:12 PM
當我們滑鼠暫時失去作用的時候，如何用鍵盤快捷鍵的方式打開右鍵選單呢?有兩種方法，一是按Shift+F10快捷鍵就可以調處右鍵選單，二是鍵盤上windows和ctrl中間帶著目錄的鍵也可以，具體的教學下面一起來看看吧。用鍵盤快速鍵開啟右鍵選單的方式第一種方法1、在電腦桌面中不選擇任何檔案時，按下鍵盤上的下圖紅色圈標註的按鍵，此按鍵為快速開啟右鍵選單的按鍵。 2、即可將桌面的右鍵選單打開，如果需要選擇其中的項目，再用滑鼠選取即可第二種方法1、其實我們使用「Shift+F10」快捷鍵就可以調處右鍵選單2
Windows筆記型電腦上的鍵盤自動打字
Feb 19, 2024 pm 05:33 PM
電腦的輸入設備如鍵盤和滑鼠都需要人類操作，不能獨立運作。 Windows筆記型電腦上的觸控板和鍵盤也是一樣。文字不會自動輸入，滑鼠也不會自動點擊。若發生異常情況，一定有原因。如果遇到筆記型電腦鍵盤自動輸入問題，請按照指南進行修復。 Windows筆記型電腦上的鍵盤會自動打字當您的Windows筆記型電腦上的鍵盤自動打字時，您可以透過以下方式進行修復。手動檢查鍵盤確保鍵盤工作正常檢查筆記型電腦是否已遠端連接檢查是否有任何自動打字程式正在運行運行惡意軟體掃描調整鍵盤設定重新安裝鍵盤驅動程式讓我們詳細了解
如何在Windows 11的任何鍵盤上指派Copilot按鈕
Feb 20, 2024 am 10:33 AM
未來幾個月將推出的Windows11電腦鍵盤上將新增一個Copilot鍵。此鍵可讓使用者在不升級新PC的情況下，透過按下指定按鈕輕鬆進入副駕駛模式。本指南將詳細介紹如何在任何Windows11鍵盤上設定副駕駛按鈕。微軟近日宣布，他們在推動人工智慧輔助駕駛方面取得了重要進展。 Windows11將新增一個專門的Copilot金鑰，進一步提升個人電腦使用者的體驗。這項硬體變化代表了WindowsPC鍵盤三十年來的首次重大升級。接下來幾個月，新的Windows11電腦將會搭載全新的Copilot鍵設計在鍵盤
邁從 K87 三模機械鍵盤新增「風信子軸」「冰淇淋軸」版：Gasket 結構，首發價 299 元起
Feb 29, 2024 pm 05:00 PM
本站2月29日消息，邁從今日為K87三模機械鍵盤推出了“風信子軸”“琉光冰淇淋軸”兩款版本，該鍵盤主打“Gasket結構、80%配列”，相關軸體鍵盤價格資訊如下：「風信子軸」版：首發價299元「琉光冰淇淋軸」版：首發價379元據介紹，系列鍵盤使用Gasket結構，採用87鍵80%配列，全鍵無衝，支持熱插拔，號稱選用“原廠/MDA雙色PBT鍵帽”，使用1.2mm單鍵開槽PCB（下燈位），配備RGB燈效，並擁有磁吸收納銘牌設計。此外，這款鍵盤配備6000毫安培電池，無線延遲3ms，官方未公佈鍵盤尺寸及
蘋果手機鍵盤怎麼設定手寫輸入法
Mar 08, 2024 pm 02:30 PM
蘋果手機鍵盤使用者想要設定手寫輸入法，但不知道怎麼操作，其實是很簡單的，使用者可以在手機的鍵盤設定直接選擇手寫輸入法輸入，如果沒有也可以手動加入手寫輸入法。蘋果手機鍵盤怎麼設定手寫輸入法答：在鍵盤設定中直接啟用手寫輸入法1、蘋果用戶在使用輸入法的時候，預設是會開啟手寫輸入法的。 2.用戶只需要在打字的時候直接點擊左下角長按選擇手寫輸入法就可以了。 3.如果使用者的手機裡面沒有手寫輸入法也可以進行手動的新增。 4.用戶進入設定找到通用鍵盤設定在第一個鍵盤裡面添加手寫輸入的選項就可以了。 5.使用手寫輸入法可
VGN 聯名《艾爾登法環》鍵鼠系列產品上架：菈妮 / 褪色者定制主題，首發 99 元起
Aug 12, 2024 pm 10:45 PM
本站8月12日消息，VGN於8月6日推出了聯名《艾爾登法環》鍵鼠系列產品，包含鍵盤、滑鼠和滑鼠墊，採用菈妮/褪色者客製化主題設計，目前系列產品已上架京東，售價99元起。本站附聯名新品資訊如下：VGN丨艾爾登法環S99PRO鍵盤此鍵盤採用純鋁合金外殼，輔以五層消音結構，使用GASKET板簧結構，擁有單鍵開槽PCB、原廠高度PBT材質鍵帽、鋁合金個人化背板；支援三模連接和SMARTSPEEDX低延遲技術；接入VHUB，可一站式管理多款設備，首發549元。 VGN丨艾爾登法環F1PROMAX無線滑鼠該滑鼠
ubuntu系統怎麼將鍵盤佈局改成美式鍵盤?
Jan 12, 2024 pm 12:39 PM
要把系統的鍵盤佈局改為美式鍵盤，ubuntu系統該怎麼修改呢？下面我們就來看看詳細的設定方法。 1.在桌面上右鍵，開啟openterminal，輸入指令。 2、只要輸入管理員密碼,依照類型選擇你的電腦。 3、選擇國家English（us），按tab選OK。 4.鍵盤佈局選擇English（us）代表是美國，圖二設定一個修飾按鍵。 5.再選擇一個按鍵組合起來以便啟動它的【altgr】功能，選no，則不用組合鍵，然後選yes，那麼即可把鍵盤佈局設定為English（us），就是美式鍵盤。
