可选择可输入控件：编辑与脚本实现

需积分: 9 55 浏览量更新于2024-09-13 收藏 10KB TXT 举报

"这篇资源主要介绍了一种可选择又可输入的select控件，它允许用户在下拉选项中不仅可以选择已有选项，还能自行输入新的值。提供的内容包括相关知识指南、参考资料、编辑器和免费脚本，适用于网页表单设计和交互功能的增强。" 在网页开发中，`select` 控件通常用于创建下拉列表，用户只能从中选择已预设的选项。然而，这个可选择又可输入的`select`控件扩展了这一功能，使得用户在需要时可以输入自己的选项，增加了用户体验的灵活性和便捷性。在给定的代码片段中，我们可以看到一个JavaScript函数`beginEditing(menu)`被用来启动编辑模式。当用户选择一个非只读选项时，该函数会被触发，将选中的选项文本替换为一个下划线，从而进入编辑状态。函数`keyPressHandler(e)`处理键盘事件，根据用户按下的是退格键（8）还是左箭头键（37），或是其他键（如回车键13或任何其他字符键），来更新正在编辑的选项文本。如果用户按下的是退格键或左箭头键，会删除最后一个字符并保留下划线；如果按下的是回车键，`finish()`函数会被调用，结束编辑并可能保存用户的输入；对于其他字符键，它会在当前文本后添加一个新的字符并保留下划线，以便用户继续输入。此外，代码还检测了浏览器类型，通过`navigator.appName.indexOf("Netscape")!=-1`来判断是否为Netscape系列的浏览器（包括Firefox等），这是因为不同的浏览器可能对某些事件处理或属性访问有不同的实现。这段JavaScript代码兼容了Netscape系列的浏览器，确保了在不同环境下都能正常工作。这样的可编辑`select`控件在实际应用中非常有用，比如在需要用户输入特定但可能不在预设列表中的信息时，例如搜索建议、自定义分类或者填写特殊需求等场景。结合知识指南和参考资料，开发者可以更好地理解和实现这种控件，提升网站的交互性和用户友好性。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ">

<HTML> <HEAD> <TITLE> 可编辑菜单 </TITLE>
<META content= "提供知识指南，相关参考资料，js 编辑器，即免费脚本 " name=description>
<META content=指南，参考资料，技术论坛，脚本 name=keywords>
<META content= "text/html; charset=gb2312 " http-equiv=Content-Type>
<SCRIPT language=JavaScript>

<!-- Begin
var o = null;
var isNN = (navigator.appName.indexOf( "Netscape ")!=-1);
function beginEditing(menu) {
finish();
if(menu[menu.selectedIndex].value != "read-only ") {
o = new Object();
o.editOption = menu[menu.selectedIndex];
o.editOption.old = o.editOption.text;
o.editOption.text = "_ ";
menu.blur();
window.focus();
document.onkeypress = keyPressHandler;
}
function keyPressHandler(e){
var option = o.editOption;
var keyCode = (isNN) ? e.which : event.keyCode;
if(keyCode == 8 || keyCode == 37)
option.text = option.text.substring(0,option.text.length-2) + "_ ";
else if (keyCode == 13) {
finish();

剩余7页未读，继续阅读

cpcMH

粉丝: 0
资源: 1

可选择可输入控件：编辑与脚本实现

c# 可输入可选择时间日期控件

可输入可选择的SELECT控件

可输入可选择的JS时间控件

重写DropDownList控件,具有可选择,可自行输入文字功能

javascrip可输入可选控件

php可输入下拉框控件

标签输入控件

数字输入控件

经纬度输入控件

可输入的日历控件

最新资源