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 相关文章推荐
javascript cookies操作集合
Apr 12 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
Jun 05 Javascript
动态的创建一个元素createElement及删除一个元素
Jan 24 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
Mar 23 Javascript
javascript表单验证大全
Aug 12 Javascript
JavaScript对象参数的引用传递
Jan 14 Javascript
Node.js Express安装与使用教程
May 11 Javascript
JavaScript引用类型RegExp基本用法详解
Aug 09 Javascript
微信小程序CSS3动画下拉菜单效果
Nov 04 Javascript
Vue中jsx不完全应用指南小结
Nov 01 Javascript
VueJS实现用户管理系统
May 29 Javascript
JavaScript中document.activeELement焦点元素介绍
Nov 27 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为SHOPEX增加日志功能代码
2010/07/02 PHP
基于php无限分类的深入理解
2013/06/02 PHP
PHP中替换键名的简易方法示例详解
2014/01/07 PHP
php+Mysqli利用事务处理转账问题实例
2015/02/11 PHP
Nigma vs AM BO3 第二场2.13
2021/03/10 DOTA
escape、encodeURI、encodeURIComponent等方法的区别比较
2006/12/27 Javascript
javascript高亮效果的二种实现方法
2008/09/14 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
2012/04/14 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
2012/08/14 Javascript
如何判断元素是否为HTMLElement元素
2013/12/06 Javascript
js面向对象之公有、私有、静态属性和方法详解
2015/04/17 Javascript
javascript中利用柯里化函数实现bind方法
2016/04/29 Javascript
jQuery Masonry瀑布流布局神器使用详解
2017/05/25 jQuery
页面点击小红心js实现代码
2018/05/26 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
2018/11/02 Javascript
微信小程序进入广告实现代码实例
2019/09/19 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
2019/10/26 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
2020/01/21 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
2020/08/20 Javascript
使用webpack和rollup打包组件库的方法
2021/02/25 Javascript
python对字典进行排序实例
2014/09/25 Python
Python脚本实现DNSPod DNS动态解析域名
2015/02/14 Python
用pycharm开发django项目示例代码
2018/10/24 Python
解决Django生产环境无法加载静态文件问题的解决
2019/04/23 Python
Pandas透视表(pivot_table)详解
2019/07/22 Python
python 利用jinja2模板生成html代码实例
2019/10/10 Python
python wsgiref源码解析
2021/02/06 Python
Daisy London官网:英国最大的首饰集团IBB旗下
2019/02/28 全球购物
Craghoppers德国官网:户外和旅行服装
2020/02/14 全球购物
高中自我评价范文
2014/01/27 职场文书
计算机科学系职业生涯规划书
2014/03/08 职场文书
银行职员自我鉴定
2014/04/20 职场文书
教师个人自我剖析材料
2014/09/29 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
放假通知范文
2015/04/14 职场文书
培训心得体会怎么写
2016/01/25 职场文书