使用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 相关文章推荐
XML+XSL 与 HTML 两种方案的结合
Apr 22 Javascript
简单选项卡 js和jquery制作方法分享
Feb 26 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
Nov 05 Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 Javascript
jQuery validate验证插件使用详解
May 11 Javascript
javascript 正则表达式分组、断言详解
Apr 20 Javascript
vue2.0 elementUI制作面包屑导航栏
Feb 22 Javascript
浅谈webpack4.x 入门(一篇足矣)
Sep 05 Javascript
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
vue表单数据交互提交演示教程
Nov 13 Javascript
JS数组方法shift()、unshift()用法实例分析
Jan 18 Javascript
解决antd Form 表单校验方法无响应的问题
Oct 27 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
php 缓存函数代码
2008/08/27 PHP
PHP备份/还原MySQL数据库的代码
2011/01/06 PHP
php模拟ping命令(php exec函数的使用方法)
2013/10/25 PHP
验证javascript中Object和Function的关系的三段简单代码
2010/06/27 Javascript
基于JQuery的简单实现折叠菜单代码
2010/09/15 Javascript
setTimeout函数兼容各主流浏览器运行执行效果实例
2013/06/13 Javascript
jQuery获取和设置表单元素的方法
2014/02/14 Javascript
第六篇Bootstrap表格样式介绍
2016/06/21 Javascript
JavaScript中setTimeout的那些事儿
2016/11/14 Javascript
详解Javascript百度地图接口开发文档中的类和方法
2017/02/07 Javascript
JavaScript模块管理的简单实现方式详解
2019/06/15 Javascript
vue项目中使用vue-layer弹框插件的方法
2020/03/11 Javascript
详解JavaScript作用域 闭包
2020/07/29 Javascript
vue中路由跳转不计入history的操作
2020/09/21 Javascript
Python编程pygame模块实现移动的小车示例代码
2018/01/03 Python
Python实现爬虫从网络上下载文档的实例代码
2018/06/13 Python
树莓派动作捕捉抓拍存储图像脚本
2019/06/22 Python
python+rsync精确同步指定格式文件
2019/08/29 Python
python rsync服务器之间文件夹同步脚本
2019/08/29 Python
Python操作SQLite/MySQL/LMDB数据库的方法
2019/11/07 Python
python中的split()函数和os.path.split()函数使用详解
2019/12/21 Python
Pycharm打开已有项目配置python环境的方法
2020/07/03 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
Html5获取高德地图定位天气的方法
2019/12/26 HTML / CSS
英国顶级家庭折扣店:The Works
2017/09/06 全球购物
英国最大的在线快递公司之一:ParcelHero
2019/11/04 全球购物
班级口号大全
2014/06/09 职场文书
警察正风肃纪剖析材料
2014/10/16 职场文书
部门经理迟到检讨书
2015/02/16 职场文书
工作态度恶劣检讨书
2015/05/06 职场文书
2015年小学一年级班主任工作总结
2015/05/21 职场文书
幼儿园2016圣诞节活动总结
2016/03/31 职场文书
Mysql 性能监控及调优
2021/04/06 MySQL
Java各种比较对象的方式的对比总结
2021/06/20 Java/Android
gojs实现蚂蚁线动画效果
2022/02/18 Javascript
台式电脑蓝牙适配器怎么安装?台式电脑蓝牙适配器安装教程
2022/04/08 数码科技