JS学习笔记之可以输入的下拉列表

最新推荐文章于 2024-04-28 16:42:51 发布

iteye_17253

最新推荐文章于 2024-04-28 16:42:51 发布

阅读量128

点赞数

分类专栏： JavaScript学习笔记文章标签： js select ViewUI

JavaScript学习笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

做项目的时候遇到一个需求，允许一个下拉列表即可以选择，也可以输入。

在网上找到一个实现方法，很不错，可以有很多扩展，现在分享一下。

实现如下:

<html>
<head>
<title>可以编辑的下拉列表 

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

<body οnlοad="s1.focus();">
<h3>操作方法:</h3>
<p>
1.按Enter键开始添加输入新的选项...<br>
2.按Del键删除当前选项...<br>
3.按Esc键查看当前选项的text和value值...<br>
4.按BackSpace键删除当前选项的前一个字符...<br>
</p>
<h3>测试结果:</h3>
<p>
1.IE6.0测试通过...<br>
</p>
<br>
<h3>建议&意见:</h3>
<p>
1.大家可以做成htc,将这些函数绑在css上(很简单,不再介绍...)...<br>
</p>
<h3>示例:</h3>
<p>
<select name=s1 οnkeydοwn="catch_keydown(this);" οnkeypress="catch_press(this);" style="font-size:12px;"><option>---</option></select>
</p>
</body>
</html>