js select支持手动输入功能实现代码

select下拉框的onkeydown事件,修改下拉框的值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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[0].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事件,修改下拉框的值

1
2
3
4
5
6
7
8
9
10
11
12
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事件,保存下拉框原来的值

1
2
3
4
function catch_focus(sel) {
 oldText = sel.options[sel.selectedIndex].value;
 oldValue = sel.options[sel.selectedIndex].value;
}

使用方法

1
2
3
A
B
C

到此这篇关于js select支持手动输入功能实现代码的文章就介绍到这了,更多相关js select 手动输入内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部!

本文收集自网络,不代表IT俱乐部立场,转载请注明出处。https://www.2it.club/navsub/js/8141.html
上一篇
下一篇
联系我们

联系我们

在线咨询: QQ交谈

邮箱: 1120393934@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部