FengShen_Xia
- 浏览: 273169 次
- 性别:
- 来自: 东方水城
-
文章分类
最新评论
-
18335864773：
pageoffice 插件 可以实现 office文档的在线操 ...
Java调用com组件操作word -
coosummer：
推荐使用在线免费bug管理系统- bug 禅思：http:// ...
Bug管理工具 -
program_coco：
柠檬bug管理系统，一个在线的bug管理系统。www.lemo ...
Bug管理工具 -
影非弦：
这个in.read(data);//data是一个byte[] ...
Java串口通信总结 -
影非弦：
这个不详细啊，我弄了一天了，都没弄出来，总是出错，读信息的时候 ...
Java串口通信总结
当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下拉框可输入情况，具体一些细节方面，有待完善。
分享到：
评论
11 楼
clone168
2009-08-23
<p> </p>
<div class="quote_title">clone168</div>
<div class="quote_div">输入的时候，先触发keydown然后再触发keypress</div>
<p>
所以那个函数执行了两次，也就是不仅仅是IE下的问题了</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>
<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>
<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>
<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>
<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>
</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>
<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下不支持中文，囧，去查查原因。
！！！
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 没有用啊？
发表评论
-
Highcharts使用指南
2013-08-29 10:49 1312摘要 Highcharts图表控件是目前使用最为广泛的图 ... -
JS多级联动
2010-11-22 10:02 1198<!DOCTYPE HTML PUBLIC " ... -
window.open()代替window.showModalDialog()问题
2009-11-25 10:15 2615最近在做一个项目，需要用到弹出一个子窗口（sub. ... -
JavaScript EE：在服务器端运行JavaScript文件
2009-01-15 16:13 1380本系列文章围绕的主旨是了解如何在 Ajax 和 ... -
悟透JavaScript(结)
2008-12-18 11:09 826原型扩展 想必 ... -
悟透JavaScript(续)
2008-12-18 11:07 841构造对象 好了，接下我们来讨论一下对象的另一种创 ... -
悟透JavaScript
2008-12-18 11:06 815引子 编程世界里只存在两种基本元素，一个是数 ... -
你不知道的 JavaScript - “this”
2008-12-18 11:03 862JavaScript 里的 this 到底指得是什么？很多 ... -
JS日期操作
2008-12-18 10:17 1527时间对象是一个我们经常要用到的对象，无论是做时间输出、时间判断 ... -
event.keycode值大全
2008-12-17 17:29 5318event.keycode值大全，方便自己和大家以后查阅： ... -
document.createElement("input")动态创建html元素时checkbox
2008-12-17 17:27 3832最近研究createElement的时候发现一个奇怪的问题 ... -
Js对中文字符串加密
2008-12-17 14:00 2201function urlencode(text) { ... -
JavaScript的document和window对象详解
2008-12-17 13:53 1253[document对象 ] 该对 ... -
简单js分页效果
2008-12-17 13:41 2708写了这个js让我彻底喜欢上全局变量，在这个例子中所有的内容都是 ... -
JS实现图片切割效果（带拖放、缩放效果）
2008-12-16 14:40 3078<!DOCTYPE html PUBLIC " ... -
JS + DIV ===> 精美alert提示框
2008-12-16 14:32 5361如果*.js出现乱码现象,可以把该*.js文件用记事本打开,然 ...
相关推荐
下拉框选择已有固定value，也可以选择后进行编辑，也可以直接输入数值。
jQuery Editable Select 是一个jQuery插件，它将选择转换成输入字段，其中根据输入的字符实时显示单个元素。当JavaScript不可用时，它就变成了一个真正的选择列表。
可输入下拉框(select)源代码 可输入下拉框(select)源代码 select下拉框中可输入内容
带搜索功能的select下拉框，类似百度google的搜索框，自己匹配，很好用
本文实例为大家分享了可输入可选择的select下拉框，供大家参考，具体内容如下 1、原理： 1.1将input输入框和select框合并在一起，但是显示出向下点击的按钮: 这种比较容易做到 1.2出现输入值能够自动匹配的功能 ...
在开发过程中，我们经常会遇到有些页面要求某个文本域可以文本输入，又要求兼带支持select下拉选择
可以输入的下拉框(可用于项目的)
既可以输入，又可以下拉的输入框，类似GoogleSuggest功能
该例采用单元测试，实现fremarker通用下拉框，满足所有web下拉框需求
可编辑的下拉框 既可以编辑，又可以下拉选择 很不错的
自动匹配，可输入可选择的下拉框 可手写，可选择 方便实用。
select下拉框支持搜索功能，既可以下拉选择！也可以进行输入筛选！
一个很简单的可手写输入的下拉框，可以选择和手写输入。
主要为大家详细介绍了JS Select下拉框的相关资料，支持输入模糊查询，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例讲述了js实现Select下拉框具有输入功能的方法。分享给大家供大家参考。具体实现方法如下： 实现方法一 代码如下:<HTML> <HEAD> <META http-equiv=’Content-Type’ content=’text/html; ...
js实现的可下拉可输入input框 会自动检测输入的值在select中寻找对应选项
主要为大家详细介绍了Bootstrap框架下下拉框select搜索功能，感兴趣的小伙伴们可以参考一下
通过html元素层覆盖，实现一个可以输入，可以选择的一个select框，实际使用取值可以从text框中取值，如需从select框取值，请修改select的selectIndex以达到要求。