使用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 相关文章推荐
javascript 45种缓动效果 非常酷
Jun 28 Javascript
每天一篇javascript学习小结(Date对象)
Nov 13 Javascript
JavaScript保留关键字汇总
Dec 01 Javascript
js时间控件只显示年月
Jan 08 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
May 02 Javascript
css和js实现弹出登录居中界面完整代码
Nov 26 Javascript
Vuex中的State使用介绍
Jan 19 Javascript
详解JavaScript 浮点数运算的精度问题
Jul 23 Javascript
小程序使用watch监听数据变化的方法详解
Sep 20 Javascript
浅谈Vue.set实际上是什么
Oct 17 Javascript
Vue项目中如何使用Axios封装http请求详解
Oct 23 Javascript
5种 JavaScript 方式实现数组扁平化
Oct 05 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
Yii实现多按钮保存与提交的方法
2014/12/03 PHP
php使用递归函数实现数字累加的方法
2015/03/16 PHP
Laravel框架实现即点即改功能的方法分析
2019/10/31 PHP
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
2012/02/03 Javascript
jquery 插件学习(一)
2012/08/06 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
2013/05/03 Javascript
浅谈js中变量初始化
2015/02/03 Javascript
JavaScript实现非常简单实用的下拉菜单效果
2015/08/27 Javascript
详解JavaScript中基于原型prototype的继承特性
2016/05/05 Javascript
JavaScript重载函数实例剖析
2016/05/13 Javascript
JavaScript中点击事件的写法
2016/06/28 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
2016/12/01 Javascript
vue实现动态数据绑定
2017/04/28 Javascript
node.js中express中间件body-parser的介绍与用法详解
2017/05/23 Javascript
AngularJS实现进度条功能示例
2017/07/05 Javascript
Vue2.0用户权限控制解决方案
2017/11/29 Javascript
vue实现同一个页面可以有多个router-view的方法
2018/09/20 Javascript
微信小程序实现顶部导航特效
2019/01/28 Javascript
element-ui多文件上传的实现示例
2019/04/10 Javascript
详解微信小程序的不同函数调用的几种方法
2019/05/08 Javascript
vue-父子组件和ref实例详解
2019/11/10 Javascript
Echarts.js无法引入问题解决方案
2020/10/30 Javascript
python执行shell获取硬件参数写入mysql的方法
2014/12/29 Python
python snownlp情感分析简易demo(分享)
2017/06/04 Python
Python实现中一次读取多个值的方法
2018/04/22 Python
python opencv 图像拼接的实现方法
2019/06/27 Python
详解Python打包分发工具setuptools
2019/08/05 Python
基于python实现matlab filter函数过程详解
2020/06/08 Python
马来西亚最好的婴儿商店:Motherhood
2017/09/14 全球购物
华为C++笔试题
2014/08/05 面试题
自荐信需注意事项
2014/01/25 职场文书
个人综合鉴定材料
2014/05/23 职场文书
大学迎新标语
2014/06/26 职场文书
派出所班子党的群众路线对照检查材料思想汇报
2014/10/01 职场文书
您对思维方式了解多少?
2019/12/09 职场文书
Python中np.random.randint()参数详解及用法实例
2022/09/23 Python