做项目的时候遇到一个需求,允许一个下拉列表即可以选择,也可以输入。
在网上找到一个实现方法,很不错,可以有很多扩展,现在分享一下。
实现如下:
<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 onload="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 onkeydown="catch_keydown(this);" onkeypress="catch_press(this);" style="font-size:12px;"><option>---</option></select>
</p>
</body>
</html>
分享到:
相关推荐
JavaScript,简称JS,是一种广泛用于网页和网络应用的编程...以上就是JS学习笔记中的主要内容,这些知识点覆盖了JS在网页开发中的基础和高级应用,对于任何想要深入学习和掌握JavaScript的人来说,都是宝贵的学习资源。
### JavaScript学习笔记知识点详解 #### 一、JavaScript基础语法与文档对象模型(DOM) 1. **输出语句**: `document.write("")` 是一种常见的在HTML文档中输出文本的方法。但通常建议使用更现代的方法,如修改DOM...
最后,`js`目录下的文件是插件的核心部分,其中的JavaScript代码实现了输入框与下拉列表树的交互逻辑。jQuery库提供了丰富的DOM操作和事件处理方法,使得实现这样的功能变得简单。主要步骤可能包括: 1. 监听输入框...
`<label>`为输入字段提供描述,`<select>`和`<option>`用于创建下拉列表,`<textarea>`定义多行文本输入。 15. ` `:换行标签,用于在文本中插入一个换行符。 16. `<hr>`:水平线标签,用于在页面上添加一条...
例如,你可以用JavaScript来实现当用户点击按钮时显示一个警告对话框,或者在用户输入内容时实时验证其有效性。 HTML中的基本标签包括注释标签`<!-- -->`,标题标签如`<h1>`到`<h6>`,用于文本格式化的标签如`<b>`...
- **`<select>`**:下拉列表框。 - **`<option>`**:列表项。 - **多媒体** - **`<embed>`**:嵌入多媒体文件(如 Flash、音频或视频)。 - **`<bgsound>`**:为页面添加背景音乐。 - **`...
### HTML5学习笔记知识点梳理 #### 一、HTML5简介及特点 - **定义**: HTML5是HTML(HyperText Markup Language)的最新版本,由万维网联盟(W3C)于2014年10月正式发布。它不仅继承了HTML的基本特性,还新增了许多...
### JS学习笔记知识点详解 #### 一、基本概念与语法 **1. 输出语句** `document.write("");` 是一种将文本直接输出到HTML文档的方法。这通常用于简单的测试场景,但在实际开发中不建议使用,因为它会覆盖整个...
根据提供的文件内容,我们可以整理出一系列关于JavaScript的基础知识点与实用操作方法。以下是对这些知识点的详细解释: ### 1. `document.write("")` `document.write` 是一个在文档流中写入HTML的方法。通常用于...
【VC#学习笔记仅供参考】 本笔记主要涵盖了ASP.NET应用程序的开发知识,特别是针对网页设计和数据库访问技术。在学习过程中,我们将逐步了解如何构建信息浏览页面,并深入探讨各种Web服务器控件的使用。 首先,...
HTML的`<form>`元素用于创建用户输入表单,`<input>`元素可以设置不同类型(如文本、密码、复选框、单选按钮等),`<button>`提交或重置表单,`<label>`关联输入字段,`<select>`和`<option>`用于下拉菜单,`...
### Web前端基础学习笔记 #### 一、HTML ##### 1. HTML简介 - **网站与网页**: 网页是使用HTML标记语言编写的文件,用于描述同一范畴内的信息或数据。多个网页组成一个网站。 - **HTML**: 超文本标记语言,是一种...
`<FORM>`用于创建表单,`<TEXTAREA>`和`<INPUT>`则定义输入字段,`<SELECT>`创建下拉菜单,`<OPTION>`定义选项。 图像通过`<IMG>`标签插入,链接用`<A>`标签实现,`<BASE>`可以设置基础URL。框架技术包括`...
### Bootstrap 学习笔记知识点详解 #### 一、Bootstrap简介 Bootstrap是一款非常流行的前端开发框架,它基于HTML、CSS及JavaScript构建,旨在帮助开发者快速搭建响应式的网站和应用。通过预定义的样式和布局,...
- `<select>`和`<option>`用于创建下拉列表。 6. HTML5新特性 - 新增的语义化标签,如`<header>`, `<nav>`, `<section>`, `<article>`, `<aside>`, `<footer>`,帮助提高网页可读性和可访问性。 - `<canvas>`元素...
本学习笔记旨在详细介绍HTML的基本概念、常用标签及其英文单词解释,帮助初学者更好地理解和运用HTML。 一、HTML基本结构 HTML文档通常以`<!DOCTYPE html>`开头,声明当前文档为HTML5标准。接着是`<html>`标签,它...
2. **AutoComplete**:提供自动补全功能,常用于搜索框,根据用户输入动态更新下拉列表。 3. **RemoteObject**:提供对服务器端Java对象的透明访问,使得JavaScript可以直接调用Java方法。 4. **Batching**:支持...
### LotusDomino学习笔记知识点概览 #### 1. 选取视图的列的内容 (@Trim @DbColumn) - **@Trim**: 是一个内置的LotusScript函数,用于去除字符串两端的空白字符。 - **@DbColumn**: 此函数用于获取指定列的信息。...
下拉列表的选项值可以通过`options[n].value`获取。 字符串方法还包括`toUpperCase()`和`toLowerCase()`用于大小写转换,`indexOf()`检测子字符串位置,`charAt()`获取指定索引处的字符,以及`substring()`截取子...
### HTML学习笔记知识点详解 #### 一、基本标签与功能介绍 HTML(HyperText Markup Language)是一种用于创建网页的标准标记语言。以下是一些常见的HTML标签及其功能: 1. **标题标签**:`<h1>`至`<h6>`,其中`...