带输入框的下拉控件

最新推荐文章于 2022-11-16 14:03:37 发布
最新推荐文章于 2022-11-16 14:03:37 发布
阅读量469 收藏
点赞数
<Html>
<Head>
<SCRIPT LANGUAGE="JavaScript">
<!--
//定义 select 原值
var oldValue,oldText;
//select下拉框的onkeydown事件，修改下拉框的值
function catch_keydown(sel){
switch(event.keyCode) {
case 13: //回车键
event.returnValue = false;
break;
case 27: //Esc键
sel.options[sel.selectedIndex].text = oldText;
sel.options[sel.selectedIndex].value = oldValue;
event.returnValue = false;
break;
case 8:  //空格健
var s = sel.options[sel.selectedIndex].text;
s = s.substr(0,s.length-1);
if (sel.options[sel.selectedIndex].value==sel.options[sel.selectedIndex].text){
sel.options[sel.selectedIndex].value=s;
sel.options[sel.selectedIndex].text=s;
}
event.returnValue = false;
break;
}
if (!event.returnValue && sel.onchange)
sel.onchange(sel)
}
//select下拉框的onkeypress事件，修改下拉框的值
function catch_press(sel){
if(sel.selectedIndex>=0){
var s = sel.options[sel.selectedIndex].text + String.fromCharCode(event.keyCode);
if (sel.options[sel.selectedIndex].value==sel.options[sel.selectedIndex].text){
sel.options[sel.selectedIndex].value=s;
sel.options[sel.selectedIndex].text=s;
}
event.returnValue = false;
if (!event.returnValue && sel.onchange)
sel.onchange(sel)
}
}
//select下拉框的onfocus事件，保存下拉框原来的值
function catch_focus(sel) {
oldText = sel.options[sel.selectedIndex].value;
oldValue = sel.options[sel.selectedIndex].value;
}
//select 选择框鼠标上移时提示选择的内容
function selMouseOver(obj){
with (document.all.div_hint){
innerText = obj.options[obj.selectedIndex].text;
if (innerText.length > 0){
innerText = " " + innerText + "  ";
style.display = "block";
style.left = event.clientX + 16;
style.top = event.clientY;
}
}
}
//select 选择框鼠标移开时消失
function selMouseOut(obj){
with (document.all.div_hint){
style.display = "none"
}
}
//-->
</SCRIPT>
</Head>
<Body>
<!--调用-->
<select style='width:130px;z-index:-1' name='tmpSel' 
οnmοuseοver=selMouseOver(this)
 οnmοuseοut=selMouseOut(this) 
 οnkeydοwn=catch_keydown(this) 
 οnkeypress=catch_press(this) 
 οnfοcus=catch_focus(this)>
 
 
 
 
 
 
 
 
 
 
<option value=''></option>
<option value='1'>1</option>
<option value='2'>2</option>
</select>
<!--提示块-->
<div id=div_hint style="font-size:12px;color:red;display:none;position:absolute; z-index:2; top:200;background-color: #F7F7F7; layer-background-color: #0099FF; border: 1px #9c9c9c solid;filter:Alpha(style=0,opacity=80,finishOpacity=100);"></div>
</Body>
</Html>
<br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
hyb1234hi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可输入的下拉框
07-04
可输入的下拉框，3种风格： 1.可以输入首字母检索出相关信息下拉列表显示 2.可以输入后回车记录该信息到下拉列表（可输入） 3.一般的可输入可下拉。
可输入下拉框（html控件）
05-18
简单javavscript实现的可输入下拉框（仿VC的comobox），用于html网页开发。 不懂代码的，可直接在页面中插入该源码实现，方便易用。
实现一个可输入的下拉框
qq_44748911的博客
11-16 3347
实现一个可输入的下拉框
iOS输入框下拉选择框（UITableView实现）
08-27
在iOS应用开发中，UI设计往往要求用户交互更加便捷高效，其中输入框下拉选择框是一种常见的交互形式。本教程将详细介绍如何利用UITableView和UITextField来实现这一功能，以提升用户体验。 首先，我们要明白...
下拉输入框
05-28
这时，我们可以自定义控件来实现更复杂的下拉输入框功能。例如，可以创建一个继承自`EditText`的类，添加一个`PopupWindow`来展示下拉菜单。这样可以更好地控制UI样式和交互逻辑。 ```java public class ...
下拉树控件组合自定义控件
06-21
最后，关于"下拉树控件组合自定义控件"，这可能是指将下拉树控件与其他自定义组件（如日期选择器、输入框等）进行组合，以满足特定的业务需求。例如，创建一个既可以下拉选择树形结构，又可以输入特定值的复合输入...
swift-YJDropdownListView文本输入框下拉列表
08-15
总的来说，Swift-YJDropdownListView是一个实用的UI组件，它简化了在Swift应用中实现文本输入框下拉列表的过程，使得开发者可以更专注于应用的核心功能开发，而无需从头构建此类交互控件。通过学习和使用这个组件，...
js动态下拉时间控件
04-22
动态下拉时间控件是JavaScript在Web交互设计中的一个重要应用，它允许用户以更直观、友好的方式选择日期和时间，提高了用户体验。下面我们将深入探讨这个话题。 首先，我们要了解JavaScript动态下拉时间控件的基本...
最简便的可输入的下拉框（带自动补全）
11-08
这是一个实现下拉框可输入的有自动补全等功能
带输入框的下拉列表 select 输入框 过滤
07-12
带输入框的下拉列表 select 输入框 过滤
可输入的下拉列表控件
10-22
可输入的下拉列表控件jquery.editable-select，官方的控件不支持<option value='1'>2</option>无法获得value 的值，经过修改，可以获得到value 值，很方便使用
c#可输入的下拉列表框
07-14
既能输入信息又能从下拉列表框中选择信息的控件组合
可输入下拉列表_带自动提示（原创）
04-09
NULL 博文链接：https://wangzy24.iteye.com/blog/1515572
实现可输入的下拉框
安歌
12-29 9216
第一种方式：input + select &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;js实现可输入的下拉框&lt;/title&gt; &lt;style type="text/css"&gt; .wrap { position: relative; } .
两种可输入的下拉框
qq_34357018的博客
09-24 1522
第一种 说明：点击按键可进行输入与删除，无光标显示，只能在末尾进行追加与删除字符，选择其他选择项，按下键盘，会自动跳转到第一项进行编辑，且无法输入中文文字 代码： html： <span style="font-size:20px;">省份:</span> <select id="addr" name="addr" style="width:280px;" onkeydown="Select.del(this,event)" onkeypress="Select.
自制可输入式下拉框
listennerBGM的博客
02-05 643
在实际应用场景中经常会碰到系统自带的select下拉框会不满足客户需求的情况,比如下拉内容太多,用户找不过来,即使按照首字母规则排序后也很难满足客户要求,这时候能有一个输入框输入关键字之后,然后下拉选项出现一些想要的内容就是很不错的选择了 应用技术:html,css,javascript,jquery,ajax,c#,asp.net,sqlserver数据库 1.思路整理 使用input和div代替select控件,通过对input注册聚焦失焦事件控制div的显示隐藏来完成select下拉的模拟,div的内
带输入的选择框
beyondsanli的专栏
05-08 140
New Document 111111 22222222 3333333 4444 ...
django 输入框时间控件怎么只填年度和月份
最新发布
06-02
在 Django 中，你可以使用 `django...我们使用 `SelectDateWidget` 作为 `my_date` 字段的小部件，并将 `empty_label` 参数设置为 `("Year", "Month")`，以便在下拉列表中显示这些文本，从而实现只填年份和月份的控件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值