下拉菜单既可以选择,又可以自己填写

JavaScript表单操作技巧

最新推荐文章于 2018-04-18 09:35:35 发布

原创最新推荐文章于 2018-04-18 09:35:35 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#.net

javascript 专栏收录该内容

112 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的特殊表单操作方法，包括如何通过键盘输入来新增选项、如何利用删除键移除已选内容等。这些技巧有助于提高用户体验，并展示了JavaScript在网页表单交互中的灵活性。

按回车键输入新内容，按DEL删除选中内容


<body bgcolor="#fef4d9" onload="s1.focus();"> 
<script language="JavaScript"> 
<!-- 
function catch_keydown(sel) 
{ 
    switch(event.keyCode) 
    { 
        case 13: 
            //Enter; 
            sel.options[sel.length] = new Option("","",false,true); 
            event.returnValue = false; 
            break; 
        case 27: 
            //Esc; 
            alert("text:" + sel.options[sel.selectedIndex].text + ", value:" + sel.options[sel.selectedIndex].value + ";"); 
            event.returnValue = false; 
            break; 
        case 46: 
            //Delete; 
            if(confirm("删除当前选项!?")) 
            { 
                sel.options[sel.selectedIndex] = null; 
                if(sel.length>0) 
                { 
                    sel.options[0].selected = true; 
                } 
            } 
            event.returnValue = false; 
            break; 
        case 8: 
            //Back Space; 
            var s = sel.options[sel.selectedIndex].text; 
            sel.options[sel.selectedIndex].text = s.substr(0,s.length-1); 
            event.returnValue = false; 
            break; 
    } 

} 
function catch_press(sel) 
{ 
    sel.options[sel.selectedIndex].text = sel.options[sel.selectedIndex].text + String.fromCharCode(event.keyCode); 
    event.returnValue = false; 
} 
//--> 
</script> 
<select name=s1 onkeydown="catch_keydown(this);" onkeypress="catch_press(this);" style="font-size:12px;"><option>---</option></select>

详细出处参考：http://www.jb51.net/article/411.htm