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 相关文章推荐
两种WEB下的模态对话框 (asp.net或js的分别实现)
Dec 02 Javascript
Javascript继承机制的设计思想分享
Aug 28 Javascript
jquery的总体架构分析及实现示例详解
Nov 08 Javascript
常用的jQuery前端技巧收集
Dec 24 Javascript
JS+DIV+CSS实现的经典标签切换效果代码
Sep 14 Javascript
Vue.js实现文章评论和回复评论功能
May 30 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
Apr 13 Javascript
微信小程序实现之手势锁功能实例代码
Jul 19 Javascript
Async/Await替代Promise的6个理由
Jun 15 Javascript
js 递归json树实现根据子id查父id的方法分析
Nov 08 Javascript
详解JavaScript 高阶函数
Sep 14 Javascript
详解JavaScript执行模型
Nov 16 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实现网上点歌(二)
2006/10/09 PHP
PHP弹出提示框并跳转到新页面即重定向到新页面
2014/01/24 PHP
php经典算法集锦
2015/11/14 PHP
PHP获取文件扩展名的4种方法
2015/11/24 PHP
CI(CodeIgniter)框架中URL特殊字符处理与SQL注入隐患分析
2019/02/28 PHP
Javascript日期对象的dateAdd与dateDiff方法
2008/11/18 Javascript
JQuery 图片的展开和伸缩实例讲解
2013/04/18 Javascript
使用GruntJS构建Web程序之合并压缩篇
2014/06/06 Javascript
jquery 为a标签绑定click事件示例代码
2014/06/23 Javascript
谈谈对offsetleft兼容性的理解
2015/11/11 Javascript
使用Javascript实现选择下拉菜单互移并排序
2016/02/23 Javascript
AngularJS轻松实现双击排序的功能
2016/08/30 Javascript
js对字符串进行编码的方法总结(推荐)
2016/11/10 Javascript
vue-cli + sass 的正确打开方式图文详解
2017/10/27 Javascript
React Native 使用Fetch发送网络请求的示例代码
2017/12/02 Javascript
JavaScript模块详解
2017/12/18 Javascript
vue实现移动端触屏拖拽功能
2020/08/21 Javascript
Python 3.x 安装opencv+opencv_contrib的操作方法
2018/04/02 Python
python实现录音小程序
2020/10/26 Python
Python图像处理之图像的缩放、旋转与翻转实现方法示例
2019/01/04 Python
Python实现打砖块小游戏代码实例
2019/05/18 Python
Python Opencv任意形状目标检测并绘制框图
2019/07/23 Python
numpy:np.newaxis 实现将行向量转换成列向量
2019/11/30 Python
python 实现dict转json并保存文件
2019/12/05 Python
HTML5计时器小例子
2013/10/15 HTML / CSS
LightInTheBox西班牙站点:全球商品在线采购
2016/09/22 全球购物
英国最大的正宗复古足球衫制造商和零售商:TOFFS
2018/06/21 全球购物
全球烹饪课程的领先预订平台:Cookly
2020/01/28 全球购物
香港艺人陈冠希创办的潮流品牌:JUICESTORE
2021/03/04 全球购物
自主招生自荐信
2013/12/08 职场文书
策划总监岗位职责
2014/02/16 职场文书
护理专科毕业生自荐书范文
2014/02/19 职场文书
交通事故私了协议书
2014/04/16 职场文书
办理信用卡工作证明
2014/09/30 职场文书
旷工检讨书大全
2015/08/15 职场文书
导游词之宁夏贺兰山岩画
2019/11/08 职场文书