使用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 相关文章推荐
vs2003 js文件编码问题的解决方法
Mar 20 Javascript
jquery中.add()的使用分析
Apr 26 Javascript
iframe子页面与父页面在同域或不同域下的js通信
May 07 Javascript
Node.js中的事件驱动编程详解
Aug 16 Javascript
Bootstrap精简教程
Nov 27 Javascript
JavaScript学习笔记之数组求和方法
Mar 23 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
Jun 20 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
Oct 10 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
Feb 11 Javascript
js鼠标移动时禁止选中文字
Feb 19 Javascript
React Native中Navigator的使用方法示例
Oct 13 Javascript
vue 解除鼠标的监听事件的方法
Nov 13 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
与空气斗智斗勇的经典《Overlord》,传说中的“无稽之谈”
2020/04/09 日漫
thinkphp微信开发(消息加密解密)
2015/12/02 PHP
Laravel中为什么不使用blpop取队列详析
2018/08/01 PHP
Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】
2019/05/08 PHP
TP3.2框架分页相关实现方法分析
2020/06/03 PHP
jQuery 类twitter的文本字数限制带提示效果插件
2010/04/16 Javascript
Js切换功能的简单方法
2010/11/23 Javascript
jquery简单实现图片切换效果的方法
2015/05/12 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
JavaScript 总结几个提高性能知识点(推荐)
2017/02/20 Javascript
Angularjs的键盘事件的绑定
2017/07/27 Javascript
vue 微信扫码登录(自定义样式)
2020/01/06 Javascript
微信小程序修改checkbox的样式代码实例
2020/01/21 Javascript
js实现九宫格抽奖
2020/03/19 Javascript
[01:22:42]2014 DOTA2华西杯精英邀请赛 5 24 DK VS LGD
2014/05/26 DOTA
[04:52]第二届DOTA2亚洲邀请赛主赛事第一天比赛集锦:OG娜迦海妖放大配合谜团大中3人
2017/04/02 DOTA
python解析xml文件操作实例
2014/10/05 Python
django rest framework之请求与响应(详解)
2017/11/06 Python
flask入门之文件上传与邮件发送示例
2018/07/18 Python
python 整数越界问题详解
2019/06/27 Python
解决Pytorch训练过程中loss不下降的问题
2020/01/02 Python
Python如何把多个PDF文件合并代码实例
2020/02/13 Python
Python如何将图像音视频等资源文件隐藏在代码中(小技巧)
2020/02/16 Python
python由已知数组快速生成新数组的方法
2020/04/08 Python
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
2014/04/16 HTML / CSS
销售找工作求职信
2013/12/20 职场文书
网络信息安全承诺书
2014/03/26 职场文书
小学生综合素质评语
2014/04/23 职场文书
知识就是力量演讲稿
2014/09/13 职场文书
2014年护理工作总结范文
2014/11/14 职场文书
病人家属写给医院的感谢信
2015/01/23 职场文书
博士给导师的自荐信
2015/03/06 职场文书
小学教师教学反思
2016/02/24 职场文书
css3带你实现3D转换效果
2022/02/24 HTML / CSS
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/07 PostgreSQL
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS