`
shaohan126448
  • 浏览: 116660 次
  • 来自: 北京
社区版块
存档分类
最新评论

可编辑下拉框

 
阅读更多

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

</head>

                     城市:

<select id="name" name="name"

onkeydown="clearSelect(this,event);"

onkeypress="writeSelect(this,event);" style="width:70px;">

     <option value="">广州</option>

     <option value="test1">深圳</option>

     <option value="test2">北京</option>

     <option value="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;

     }

}

 

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>

 

<body>

</body>

</html>

 

分享到:
评论

相关推荐

    combox实现的可编辑下拉框

    而可编辑下拉框则突破这一限制,允许用户在输入框中直接输入,同时保持下拉列表功能,以便用户在输入时能够匹配并选择合适的预定义选项。 ### 2. JavaScript基础 JavaScript是实现此类交互的关键,它是一种动态、...

    Android 自定义可编辑下拉框

    "Android 自定义可编辑下拉框"是一个常见的需求,特别是在创建表单或者需要用户输入并选择特定值时。本教程将深入探讨如何实现这样一个功能,并提供已优化的代码和界面设计。 首先,我们来理解下拉框(Spinner)的...

    可编辑下拉框(html)

    可编辑下拉框,用javascript 实现

    可编辑下拉框 动态修改添加下拉框选项

    参考别人文献 同时结合实际修改部分代码做出的一个可编辑的下拉框,并且修改过程同时会动态把没有的选项加入到下拉框中

    可编辑下拉框.zip

    本示例中,我们探讨的主题是如何创建一个“可编辑下拉框”,它具备筛选、过滤和搜索功能,适用于选择国家等场景。这样的组件可以极大地提升用户体验,让用户能够更高效地找到他们需要的信息。 “可编辑下拉框”通常...

    可编辑下拉框 可以自动匹配

    在IT领域,尤其是在前端开发中,"可编辑下拉框 可以自动匹配"是一种常见的交互元素设计,它结合了输入框与下拉选择框的功能,提供了用户友好的数据筛选和输入体验。这种控件通常被称为`edSelect`,正如标签所示。...

    asp.net 可编辑下拉框

    为了解决这个问题,"可编辑下拉框"(Editable DropDownList)应运而生,它结合了下拉选择和自由输入的特性,为用户提供了更大的灵活性。 ASP.NET中的Editable DropDownList控件通常通过自定义或者第三方库实现,如...

    可编辑 下拉框

    在IT界,"可编辑下拉框"是一种常见的用户界面元素,它结合了传统下拉框和文本输入框的功能,允许用户既可以从中选择预设的选项,也可以自行输入新的值。这种控件在各种应用程序和网页设计中都有广泛应用,提高了用户...

    Android实现仿QQ登录可编辑下拉框

    在Android开发中,创建一个仿QQ登录的可编辑下拉框是一种常见的需求,它结合了EditText的文本输入功能和Spinner的下拉选择功能,同时提供了更友好的用户交互体验。本示例将通过使用EdiText、PopupWindow、ListView和...

    Jquery可编辑下拉框控件

    "Jquery可编辑下拉框控件"是一种基于jQuery的组件,它提供了更丰富的用户交互体验,允许用户在下拉框中进行编辑,不仅可以选择已有选项,还能输入自定义内容。这样的控件对于数据录入或搜索场景特别有用,因为它结合...

    HTML可编辑下拉框_JS自动补全

    HTML中的可编辑下拉框是一种交互式用户界面元素,它结合了传统下拉框的简洁性和文本输入框的灵活性。这种功能通常用于提供用户输入建议或自动补全,提高用户体验和数据输入效率。在本话题中,我们将深入探讨如何利用...

    可编辑下拉框 支持常用浏览器

    标题中的“可编辑下拉框 支持常用浏览器”指的是在网页开发中,实现一个具有编辑功能的下拉框(Dropdown)控件,并且这个控件能在主流的浏览器上正常工作,如Chrome、Firefox、Safari和Edge等。在Web应用中,下拉框...

    可编辑的下拉框(JavaScript)

    在网页开发中,传统的下拉框(Dropdown List)通常是静态的,用户只能从中选择已预设的选项,而无法直接...通过熟练掌握JavaScript和DOM操作,开发者可以创建功能强大且易用的可编辑下拉框,提升网站或应用的用户体验。

    简单实用的可编辑下拉框

    #### 一、可编辑下拉框的概念与应用场景 - **概念**:可编辑下拉框是指允许用户不仅可以选择预设的选项,还可以直接在下拉框内输入新值的一种交互方式。 - **应用场景**: - 数据录入系统:允许用户在没有完全匹配...

    Android实现仿QQ登录可编辑下拉框源代码

    在Android开发中,创建一个仿QQ登录的可编辑下拉框是一项常见的需求,它不仅可以提供用户友好的界面,还能提高应用的用户体验。本教程将详细讲解如何实现这样一个功能,并通过源代码实例帮助开发者深入理解其工作...

    Android实现仿QQ登录可编辑下拉框 源码

    主要以EdiText、PopupWindow、ListView及Adapter来实现下拉效果,源码,如果没有资源分可以直接访问http://blog.csdn.net/zw_yuyan/article/details/7734736 完整的代码文档,或者我的bd文库...

Global site tag (gtag.js) - Google Analytics