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

前端技术 2023/09/07 JavaScript
复制代码 代码如下:

<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>

本文地址：https://www.stayed.cn/item/20100

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案