使用js实现一个可编辑的select下拉列表


Posted in Javascript onFebruary 20, 2014
<select id="name" name="name" 
onkeydown="clearSelect(this,event);" 
onkeypress="writeSelect(this,event);" style="width:70px;"> 
<option value=""></option> 
<option value="test1">test1</option> 
<option value="test2">test2</option> 
<option value="test3">test3</option> 
</select> <script> 
function clearSelect(obj,e) 
{ 
opt = obj.options[0]; 
opt.selected = "selected"; 
if((e.keyCode== 8) ||(e.charCode==8))//使用退格(backspace)键实现逐字删除的编辑功能 
{ 
opt.value = opt.value.substring(0, opt.value.length>0?opt.value.length-1:0); 
opt.text = opt.value; 
} 
if((e.keyCode== 46) ||(e.charCode==46))//使用删除(Delete)键实现逐字删除的编辑功能 
{ 
opt.value = ""; 
opt.text = opt.value; 
} 
//还可以实现其他按键的响应 
} 
function writeSelect(obj,e) 
{ 
opt = obj.options[0]; 
opt.selected = "selected"; 
opt.value += String.fromCharCode(e.charCode||e.keyCode); 
opt.text = opt.value; 
} 
function forbidBackSpace()//为了在IE中,避免backspace的返回上一页功能,和本下拉框的编辑功能冲突,需要禁掉backspace的功能。forbidBackSpace可以写在<body onkeydown="forbidBackSpace();">中。 
{ 
if((event.keyCode == 8) && (event.srcElement.type != "text" && event.srcElement.type != "textarea" && event.srcElement.type != "password")) 
{ 
event.keyCode = 0; 
event.returnValue = false; 
} 
} 
</script>
Javascript 相关文章推荐
IE6下JS动态设置图片src地址问题
Jan 08 Javascript
jquery的$(document).ready()和onload的加载顺序
May 26 Javascript
给文字加上着重号的JS代码
Nov 12 Javascript
javascript实现图片循环渐显播放的方法
Feb 24 Javascript
JS上传图片预览插件制作(兼容到IE6)
Aug 07 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
Sep 17 Javascript
Web前端框架Angular4.0.0 正式版发布
Mar 28 Javascript
js单线程的本质 Event Loop解析
Oct 29 Javascript
javascript异常处理实现原理详解
Feb 17 Javascript
vue实现五子棋游戏
May 28 Javascript
JavaScript实现刮刮乐效果
Nov 01 Javascript
JavaScript中展开运算符及应用的实例代码
Jan 14 Javascript
js获取指定的cookie的具体实现
Feb 20 #Javascript
js获取和设置属性的方法
Feb 20 #Javascript
js控制浏览器全屏示例代码
Feb 20 #Javascript
JS去掉第一个字符和最后一个字符的实现代码
Feb 20 #Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
Feb 20 #Javascript
JS中数组Array的用法示例介绍
Feb 20 #Javascript
javascript的回调函数应用示例
Feb 20 #Javascript
You might like
星际玩家的三大定律
2020/03/04 星际争霸
PHP中基本符号及使用方法
2010/03/23 PHP
php中XMLHttpRequest(Ajax)不能设置自定义的Referer的解决方法
2011/11/26 PHP
php的SimpleXML方法读写XML接口文件实例解析
2014/06/16 PHP
浅谈PHP值mysql操作类
2016/06/29 PHP
php变量与数组相互转换的方法(extract与compact)
2016/12/02 PHP
js打印纸函数代码(递归)
2010/06/18 Javascript
javascript 循环读取JSON数据的代码
2010/07/17 Javascript
浅谈javascript中的作用域
2012/04/07 Javascript
最棒的Angular2表格控件
2016/08/10 Javascript
JavaScript中对象的不同创建方法
2016/08/12 Javascript
jQuery实现磁力图片跟随效果完整示例
2016/09/16 Javascript
详解vue+webpack+express中间件接口使用
2018/07/17 Javascript
微信小程序左滑删除功能开发案例详解
2018/11/12 Javascript
Element input树型下拉框的实现代码
2018/12/21 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
2020/03/06 Javascript
JavaScript中的函数式编程详解
2020/08/22 Javascript
解决vant的Toast组件时提示not defined的问题
2020/11/11 Javascript
python多继承(钻石继承)问题和解决方法简单示例
2019/10/21 Python
Python打开文件、文件读写操作、with方式、文件常用函数实例分析
2020/01/07 Python
scrapy爬虫:scrapy.FormRequest中formdata参数详解
2020/04/30 Python
Python实现常见的几种加密算法(MD5,SHA-1,HMAC,DES/AES,RSA和ECC)
2020/05/09 Python
Python学习工具jupyter notebook安装及用法解析
2020/10/23 Python
HTML5仿手机微信聊天界面
2016/03/18 HTML / CSS
Diesel美国网上商店:意大利牛仔时装品牌
2020/12/10 全球购物
网吧收银员岗位职责
2013/12/14 职场文书
产假请假条
2014/04/10 职场文书
感恩的演讲稿
2014/05/06 职场文书
小学生环保倡议书
2014/05/15 职场文书
说好普通话圆梦你我他演讲稿
2014/09/21 职场文书
就业协议书盖章的注意事项
2014/09/28 职场文书
庆祝三八妇女节标语
2014/10/09 职场文书
酒店收银员岗位职责
2015/04/07 职场文书
小学语文的各类谚语(70首)
2019/08/15 职场文书
聊聊redis-dump工具安装问题
2022/01/18 Redis
redis击穿 雪崩 穿透超详细解决方案梳理
2022/03/17 Redis