可输入的select下拉框

FengShen_Xia

浏览: 279409 次
性别:
来自: 东方水城

最近访客更多访客>>

m1475a

scootzhao

linshichen

yjanbyjanb

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

IE Firefox QQ IDEA HTML

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

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

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

<html>
<head>
<title>可输入的select下拉框</title>
</head>
<script>
   
</script>
<body >
<select style='width:150px;z-index:-1' id="aa" name="selectHelpCode" onkeydown="if(event.keyCode == 8){this.options[0].text = '';}" onkeypress="writeSelect(this)">
    <option value=""></option>
    <option value="11">11</option>
    <option value="22">22</option>
    <option value="33">33</option>
</select>

<input type="button" value="点我" onclick="ttt();"/>

<script>
   
    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);
}
    </script>

</body>
</html>

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

分享到：

非常精美的ext桌面系统，超级帅 | event.keycode值大全

2008-12-17 17:32
浏览 10732
评论(11)
论坛回复 / 浏览 (11 / 21529)
分类:Web前端
查看更多

11 楼 clone168 2009-08-23

<p> </p>
<div class="quote_title">clone168</div>
<div class="quote_div">输入的时候，先触发keydown然后再触发keypress</div>
<p>
所以那个函数执行了两次，也就是不仅仅是IE下的问题了</p>

10 楼 jianguang_qq 2009-08-23

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

9 楼 clone168 2009-08-23

<div class="quote_title">jianguang_qq 写道</div>
<div class="quote_div">
<p>再化简下代码：</p>
<pre name="code" class="js"><body >
<select id="select" onkeydown="selectWrite(this,event)" onkeypress="selectWrite(this,event)">
    <option value=""></option>
    <option value="11">11</option>
    <option value="22">22</option>
    <option value="33">33</option>
</select>
<input type="button" value="点我" id="test" onclick="test();"/>
<script>
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></pre>
<p> 支持逐个删除。中文支持上还有点问题，有待再优化，ie有输入双字符的问题，修改中。。。</p>
</div>
<p>不过貌似还是存在一点bug，输入的时候存在问题，输入的时候，先触发<span style="">keydown然后再触发keypress</span></p>

8 楼 clone168 2009-08-23

<div class="quote_title">jianguang_qq 写道</div>
<div class="quote_div">
<div class="quote_title">clone168 写道</div>
<div class="quote_div">
<p>test函数不存在，<img src="/images/smiles/icon_wink.gif" alt=""></p>
<p>清除的那个函数在IE中只是把text清除了，点击按钮弹出的还是value，还是会显示出来</p>
<p>而在firefox中则出现了连text都不会清除的情况，而且，把select下拉的时候还能看到里面新增了乱码</p>
</div>
<p><br>你回复的真快，我正在修改呢。请再看上面修改后的。</p>
</div>
<p>嗯，呵呵，我正在看你的最新版，不错<img src="/images/smiles/icon_idea.gif" alt=""></p>

7 楼 jianguang_qq 2009-08-23

<div class="quote_title">clone168 写道</div>
<div class="quote_div">
<p>test函数不存在，<img src="/images/smiles/icon_wink.gif" alt=""></p>
<p>清除的那个函数在IE中只是把text清除了，点击按钮弹出的还是value，还是会显示出来</p>
<p>而在firefox中则出现了连text都不会清除的情况，而且，把select下拉的时候还能看到里面新增了乱码</p>
</div>
<p><br>你回复的真快，我正在修改呢。请再看上面修改后的。</p>

6 楼 clone168 2009-08-23

<div class="quote_title">jianguang_qq 写道</div>
<div class="quote_div">
<p>再化简下代码：</p>
<pre name="code" class="js"><select style='width:150px;z-index:-1' id="aa" name="selectHelpCode" onkeydown="if(event.keyCode ==

{this.options[0].text = '';}" onkeypress="writeSelect(this,event)">
    <option value=""></option>
    <option value="11">11</option>
    <option value="22">22</option>
    <option value="33">33</option>
</select>

<input type="button" value="点我" id="test" onclick="test();"/>
<script>
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></pre>
<p> 只优化了两个函数实现，命名、html等我就不优化了，知道lz也是为了测试随便写的</p>
</div>
<p>test函数不存在，<img src="/images/smiles/icon_wink.gif" alt=""></p>
<p>清除的那个函数在IE中只是把text清除了，点击按钮弹出的还是value，还是会显示出来</p>
<p>而在firefox中则出现了连text都不会清除的情况，而且，把select下拉的时候还能看到里面新增了乱码</p>

5 楼 clone168 2009-08-23

<p>
</p>
<pre name="code" class="html"><select style='width:150px;z-index:-1' id="aa" name="selectHelpCode" onkeydown="clearOption(this,event)" onkeypress="writeSelect(this,event)">
<option value=""></option>
<option value="11">11</option>
<option value="22">22</option>
<option value="33">33</option>
</select>
<input type="button" value="点我" onclick="ttt();"/></pre>

<pre name="code" class="js">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);
}
</pre>

<p>
仅仅是在原来的基础上修改，包括命名都没有考虑，甚至函数的个数都没有改变<img src="/images/smiles/icon_biggrin.gif" alt=""></p>
<p> 当然这里还可以优化，两个函数有一部分是相同的，其实可以再封装一次，方便以后调用，楼主可以试试，呵呵</p>

4 楼 jianguang_qq 2009-08-23

<p>再化简下代码：</p>
<pre name="code" class="js"><select id="select" onkeydown="Select.del(this,event)" onkeypress="Select.write(this,event)">
    <option value=""></option>
    <option value="11">11</option>
    <option value="22">22</option>
    <option value="33">33</option>
</select>
<input type="button" value="点我" id="test" onclick="test();"/>
<script>
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></pre>
<p> 支持逐个删除。ff中文支持上还有点问题，有待再优化。</p>
<p> </p>
<p>该死的ie 和ff事件兼容性问题。</p>
<p>楼主例子很不错，让我在优化过程中学到了，好些东西。一会儿总结一下。</p>

3 楼 jianguang_qq 2009-08-23

作者创意不错，赞一个

！！！

onkeypress="writeSelect(this)" 改成 onkeypress="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 没有用啊？

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论