前端下拉框能支持手动输入_可输入的select下拉框

当select下拉框中没有要选择的信息项时，可以直接在select中输入自己想要得信息项。

在输入信息项时，不改变select下拉框中原有的信息项。

通过Backspace键可以清除刚才输入的信息项，以便重新输入。如果不清除，再输入信息时，会在原来输入的基础之上继续添加信息。如：原来手动输入信息是111，如果不清除再输入222时，信息项就变成111222

可输入的select下拉框

function writeSelect(obj){

obj.options[0].selected = "select";

obj.options[0].text = obj.options[0].text + String.fromCharCode(event.keyCode);

event.returnValue=false;

return obj.options[0].text;

}

function ttt(){

var ss = document.getElementById("aa").value;

var jg = "";

if(ss == ""){

var aas = writeSelect(document.getElementById("aa"));

jg = aas;

}else{

jg = document.getElementById("aa").value;

}

alert(jg);

}

代码只是为了展示select下拉框可输入情况，具体一些细节方面，有待完善。

分享到：

2008-12-17 17:32

论坛回复 / 浏览 (11 / 21214)

11 楼

clone168

2009-08-23

clone168

输入的时候，先触发keydown然后再触发keypress

所以那个函数执行了两次，也就是不仅仅是IE下的问题了

10 楼

jianguang_qq

2009-08-23

我靠，没看到“ie有输入双字符的问题，修改中。。。”这几个字吗

9 楼

clone168

2009-08-23

jianguang_qq 写道

再化简下代码：

<body >

</select>

function selectWrite(obj,e){

var opt = obj.options[0];

opt.selected = "selected";

if((e.keyCode||e.charCode) ==

{

opt.text = opt.value = opt.value.substring(0, opt.value.length>0?opt.value.length-1:0);

}else{

opt.text = opt.value += String.fromCharCode(e.charCode||e.keyCode);

}

function test(){

alert(document.getElementById("select").value);

}

</script>

</body>

支持逐个删除。中文支持上还有点问题，有待再优化，ie有输入双字符的问题，修改中。。。

不过貌似还是存在一点bug，输入的时候存在问题，输入的时候，先触发keydown然后再触发keypress

8 楼

clone168

2009-08-23

jianguang_qq 写道

clone168 写道

test函数不存在，

清除的那个函数在IE中只是把text清除了，点击按钮弹出的还是value，还是会显示出来

而在firefox中则出现了连text都不会清除的情况，而且，把select下拉的时候还能看到里面新增了乱码

你回复的真快，我正在修改呢。请再看上面修改后的。

嗯，呵呵，我正在看你的最新版，不错

7 楼

jianguang_qq

2009-08-23

clone168 写道

test函数不存在，

清除的那个函数在IE中只是把text清除了，点击按钮弹出的还是value，还是会显示出来

而在firefox中则出现了连text都不会清除的情况，而且，把select下拉的时候还能看到里面新增了乱码

你回复的真快，我正在修改呢。请再看上面修改后的。

6 楼

clone168

2009-08-23

jianguang_qq 写道

再化简下代码：

<select style='width:150px;z-index:-1' id="aa" name="selectHelpCode" οnkeydοwn="if(event.keyCode ==

{this.options[0].text = '';}" οnkeypress="writeSelect(this,event)">

</select>

function writeSelect(obj,e){

opt = obj.options[0];

opt.selected = "selected";

opt.text = opt.value += String.fromCharCode(e.charCode||e.keyCode);

}

function ttt(){

alert(document.getElementById("aa").value);

}

</script>

只优化了两个函数实现，命名、html等我就不优化了，知道lz也是为了测试随便写的

test函数不存在，

清除的那个函数在IE中只是把text清除了，点击按钮弹出的还是value，还是会显示出来

而在firefox中则出现了连text都不会清除的情况，而且，把select下拉的时候还能看到里面新增了乱码

5 楼

clone168

2009-08-23

<select style='width:150px;z-index:-1' id="aa" name="selectHelpCode" οnkeydοwn="clearOption(this,event)" οnkeypress="writeSelect(this,event)">

</select>

function clearOption(obj,e){

var currKey=0,e=e||event;

currKey=e.keyCode||e.which||e.charCode;

if(currKey ==

{

obj.options[0].text = "";

}

function writeSelect(obj,e){

var currKey=0,e=e||event;

currKey=e.keyCode||e.which||e.charCode;

obj.options[0].selected = "select";

if(currKey !=

{//这个地方是为了避免在firefox又出现令人厌烦的乱码,可以试试注释这句话，看看在firefox的效果

obj.options[0].text = obj.options[0].text + String.fromCharCode(currKey);

}

e.returnValue=false;

return obj.options[0].text;

}

function ttt(){

var jg = document.getElementById("aa").options[document.getElementById("aa").selectedIndex].text;

//当然也可以在前面的writeSelect函数里面同时设置options的value，这样的话，直接可以在该程序里面用value取出

alert(jg);

}

仅仅是在原来的基础上修改，包括命名都没有考虑，甚至函数的个数都没有改变

当然这里还可以优化，两个函数有一部分是相同的，其实可以再封装一次，方便以后调用，楼主可以试试，呵呵

4 楼

jianguang_qq

2009-08-23

再化简下代码：

<select id="select" οnkeydοwn="Select.del(this,event)" οnkeypress="Select.write(this,event)">

</select>

var Select = {

del : function(obj,e){

if((e.keyCode||e.which||e.charCode) ==

{

var opt = obj.options[0];

opt.text = opt.value = opt.value.substring(0, opt.value.length>0?opt.value.length-1:0);

}

write : function(obj,e){

if((e.keyCode||e.which||e.charCode) ==

return ;

var opt = obj.options[0];

opt.selected = "selected";

opt.text = opt.value += String.fromCharCode(e.charCode||e.which||e.keyCode);

}

function test(){

alert(document.getElementById("select").value);

}

</script>

支持逐个删除。ff中文支持上还有点问题，有待再优化。

该死的ie 和ff事件兼容性问题。

楼主例子很不错，让我在优化过程中学到了，好些东西。一会儿总结一下。

3 楼

jianguang_qq

2009-08-23

作者创意不错，赞一个

！！！

οnkeypress="writeSelect(this)" 改成 οnkeypress="writeSelect(this,event)";

function writeSelect(obj) 改成 function writeSelect(obj,event)

String.fromCharCode(event.keyCode) 改成 String.fromCharCode(event.charCode||event.keyCode)

就支持ff了。

可惜ff下不支持中文，囧，去查查原因。

2 楼

clone168

2009-08-23

又是一个不支持firefox的程序~~~

1 楼

fhyfufangyu

2009-07-27

backspace 没有用啊？

前端下拉框能支持手动输入_可输入的select下拉框相关推荐

html下拉框设置默认值_如何设置HTML select下拉框的默认值？
HTML中的select标签用于创建可选择选项的下拉列表:option标签包含选定时将使用的值.那么如何来设置select下拉框里的默认值?下面本篇文章就来给大家介绍一下,希望对大家有所帮助. 我们可 ...
layui下拉框怎么获取自定义值_layui如何得到select下拉框选中的值？
layui如何得到select下拉框选中的值?下面本篇文章介绍一下layui取得select下拉框选中值的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. layui如何得到se ...
element select 自动展开_原生js 让select下拉框自动展开可用size 属性来代替展开动作...
找遍全网都没一个比较好的例子!!! 什么获得焦点事件,或者添加一个点击事件都不能使下拉框自动展开最后用标签的siz属性定义和用法 size 属性规定下拉列表中可见选项的数目. 如果 size 属性 ...
extjs 点击下拉框三角形触发事件_省市县三级联动下拉框的具体实现
功能需求: ①页面中有三个下拉框选项,分别为省下拉框,市下拉框,区/县下拉框 ②选择省,则市下拉框中出现对应的该省下的市信息,选择市则区/县下拉框中出现对应的该市下面的区/县信息. 需求分析(思路) ...
html下拉选择图片,图片+JavaScript+CSS打造漂亮的select下拉选择框
下拉select选择框 body{margin:20px auto;font-family:Arial,Helvetica,sans-serif;font-size:12px;width:950px; ...
html 下拉组件被下面的组件挡住,div被select下拉框挡住了--5种解决方法
在IE中,select属于window类型控件,它会"挡住"所有非window类型控件可以这么理解,div这样的组件是在浏览器客户区使用代码"渲染"的, 他们 ...
android 弹出弹框2秒消失_基于HTML5 Canvas 实现弹出框
前言用户鼠标移入时,有弹出框出现,这样的需求很常见.这在处理 HTML 元素实现时简单,但是如果是对 HTML5 Canvas 构成的图形进行处理,这种方法不再适用,因为 Canvas 使用的是另外 ...
怎么把文本框弄一样大小_在VB中如何让文本框大小与窗体大小一样大
展开全部 1.首先我们打开vb6.0软件进入到标准"工程1"界面,这些32313133353236313431303231363533e78988e69d8331333433626 ...
c mvc ajax 返回下拉框,SpringMVC之ajax+select下拉框交互常用方式
Insert title here //ajax+select三种常用交互方式 window.οnlοad=function(){ test(); } function test(){ alert(& ...

前端下拉框能支持手动输入_可输入的select下拉框

前端下拉框能支持手动输入_可输入的select下拉框相关推荐

最新文章

热门文章