使用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 相关文章推荐
Valerio 发布了 Mootools
Sep 23 Javascript
jquery 单击li防止重复加载的实现代码
Dec 24 Javascript
JS解决url传值出现中文乱码的另类办法
Apr 08 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
Jun 09 Javascript
javascript里使用php代码实例
Dec 13 Javascript
js实现DOM走马灯特效的方法
Jan 21 Javascript
VueJs与ReactJS和AngularJS的异同点
Dec 12 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
Sep 02 Javascript
详解使用vue-admin-template的优化历程
May 20 Javascript
示例vue 的keep-alive缓存功能的实现
Dec 13 Javascript
详解vue中router-link标签所必备了解的属性
Apr 15 Javascript
Vue使用NProgress进度条的方法
Sep 21 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
第三节--定义一个类
2006/11/16 PHP
一周让你学会PHP 不错的学习资料
2009/02/06 PHP
php Undefined index的问题
2009/06/01 PHP
使用php显示搜索引擎来的关键词
2014/02/13 PHP
php使用反射插入对象示例分享
2014/03/11 PHP
PHP+Mysql实现多关键字与多字段生成SQL语句的函数
2014/11/05 PHP
php把数组值转换成键的方法
2015/07/13 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
js中设置元素class的三种方法小结
2011/08/28 Javascript
javascript显示用户停留时间的简单实例
2013/08/05 Javascript
最全面的百度地图JavaScript离线版开发
2016/09/10 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
2016/11/29 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
2016/12/18 Javascript
nodejs个人博客开发第三步 载入页面
2017/04/12 NodeJs
js实现移动端导航点击自动滑动效果
2017/07/18 Javascript
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
你可能不知道的前端算法之文字避让(inMap)
2018/01/12 Javascript
angular2路由之routerLinkActive指令【推荐】
2018/05/30 Javascript
微信小程序实现滴滴导航tab切换效果
2018/07/24 Javascript
原生JS实现的简单小钟表功能示例
2018/08/30 Javascript
解决vue组件中click事件失效的问题
2019/11/09 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
2019/12/10 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
2020/07/20 Javascript
Javascript call及apply应用场景及实例
2020/08/26 Javascript
Python中用PIL库批量给图片加上序号的教程
2015/05/06 Python
Python函数式编程指南(二):从函数开始
2015/06/24 Python
Python实现的调用C语言函数功能简单实例
2019/03/13 Python
python  文件的基本操作 菜中菜功能的实例代码
2019/07/17 Python
解决Python3 抓取微信账单信息问题
2019/07/19 Python
python之生成多层json结构的实现
2020/02/27 Python
美国正版电视节目和电影在线观看:Hulu
2018/05/24 全球购物
协议书模板
2014/04/23 职场文书
产品质量保证书
2014/04/29 职场文书
2015年班组工作总结
2015/04/20 职场文书
2015年财政局工作总结
2015/05/21 职场文书
Ajax实现局部刷新的方法实例
2021/03/31 Javascript