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

原文地址: http://blog.sina.com.cn/s/blog_4da771200100hyb4.html

 

<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,下拉列表,可编辑)