js实现键盘上下左右键选择文字并显示在文本框的方法


Posted in Javascript onMay 07, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
js使用eval解析json(js中使用json)
Jan 17 Javascript
如何编写高质量JS代码
Dec 28 Javascript
js模仿java的Map集合详解
Jan 06 Javascript
js获取页面及个元素高度、宽度的代码
Apr 26 Javascript
JavaScript编写一个贪吃蛇游戏
Mar 09 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
Jul 28 Javascript
详解Vue 事件修饰符capture 的使用
Dec 29 Javascript
vue项目开发中setTimeout等定时器的管理问题
Sep 13 Javascript
微信小程序获取用户信息并保存登录状态详解
May 10 Javascript
js针对图片加载失败的处理方法分析
Aug 24 Javascript
vue 父组件通过v-model接收子组件的值的代码
Oct 27 Javascript
js作用域及作用域链工作引擎
Jul 07 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
May 07 #Javascript
JavaScript更改字符串的大小写
May 07 #Javascript
JQUERY简单按钮轮换选中效果实现方法
May 07 #Javascript
JS基于面向对象实现的放烟花效果
May 07 #Javascript
jquery中trigger()无法触发hover事件的解决方法
May 07 #Javascript
javascript实现的图片切割多块效果实例
May 07 #Javascript
javascript中indexOf技术详解
May 07 #Javascript
You might like
一个严格的PHP Session会话超时时间设置方法
2014/06/10 PHP
PHP笛卡尔积实现原理及代码实例
2020/12/09 PHP
动态控制Table的js代码
2007/03/07 Javascript
javascript 异常处理使用总结
2009/06/21 Javascript
通过隐藏option实现select的联动效果
2009/11/10 Javascript
编写自己的jQuery插件简单实现代码
2011/04/19 Javascript
html+css+js实现xp window界面及有关功能
2013/03/26 Javascript
Ubuntu中搭建Nodejs开发环境过程分享
2014/06/01 NodeJs
AspNet中使用JQuery boxy插件的确认框
2015/05/20 Javascript
jQuery插件Timelinr 实现时间轴特效
2015/10/04 Javascript
详解javascript实现瀑布流绝对式布局
2016/01/29 Javascript
Bootstrap3.0学习教程之JS折叠插件
2016/05/27 Javascript
JS获取html元素的标记名实现方法
2016/10/08 Javascript
xmlplus组件设计系列之按钮(2)
2017/04/26 Javascript
JavaScript箭头(arrow)函数详解
2017/06/04 Javascript
javascript实现文件拖拽事件
2018/03/29 Javascript
基于angular6.0实现的一个组件懒加载功能示例
2018/04/12 Javascript
nuxt框架中路由鉴权之Koa和Session的用法
2018/05/09 Javascript
JS插件clipboard.js实现一键复制粘贴功能
2020/12/04 Javascript
使用webpack搭建vue环境的教程详解
2019/12/31 Javascript
jquery向后台提交数组的代码分析
2020/02/20 jQuery
python 编程之twisted详解及简单实例
2017/01/28 Python
Ubuntu下升级 python3.7.1流程备忘(推荐)
2018/12/10 Python
pycharm中使用anaconda部署python环境的方法步骤
2018/12/19 Python
python如何实现从视频中提取每秒图片
2020/10/22 Python
python 实现多维数组(array)排序
2020/02/28 Python
国税会议欢迎词
2014/01/16 职场文书
会计专业个人自我鉴定
2014/03/21 职场文书
欢迎标语大全
2014/06/21 职场文书
企业贷款委托书格式
2014/09/12 职场文书
教学反思怎么写
2016/02/24 职场文书
送给小学生的暑假礼物!小学生必背99首古诗
2019/07/02 职场文书
你有一份《诚信考试承诺书》待领取
2019/11/13 职场文书
怎么禁用Windows 11快照布局? win11不使用快照布局的技巧
2021/11/21 数码科技
Python+OpenCV实现图片中的圆形检测
2022/04/07 Python
MySQL 数据库范式化设计理论
2022/04/22 MySQL