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键设计在键盘
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无线鼠标该鼠标
苹果手机键盘怎么设置手写输入法
Mar 08, 2024 pm 02:30 PM
苹果手机键盘用户想要设置手写输入法，但是不知道怎么操作，其实是很简单的，用户可以在手机的键盘设置中直接选择手写输入法输入，如果没有也可以手动添加手写输入法。苹果手机键盘怎么设置手写输入法答：在键盘设置中直接启用手写输入法1、苹果用户在使用输入法的时候，默认是会开启手写输入法的。2、用户只需要在打字的时候直接点击左下角长按选择手写输入法就可以了。3、如果用户的手机里面没有手写输入法也可以进行手动的添加。4、用户进入设置找到通用键盘设置在第一个键盘里面添加手写输入的选项就可以了。5、使用手写输入法可
迈从 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，官方未公布键盘尺寸及
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），就是美式键盘。
