脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js select 手动输入

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

 更新时间：2023年05月16日 00:32:10   作者：小鱼娟娟  
这篇文章主要介绍了js select支持手动输入实现代码,需要的朋友可以参考下

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[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事件，修改下拉框的值

  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 style='width:130px;z-index:-1' name='tmpSel'    onkeydown=catch_keydown(this) onkeypress=catch_press(this) onfocus=catch_focus(this)>
  <option value=''></option>
  <option value=''>A</option>
  <option value=''>B</option>
  <option value=''>C</option>
</select>

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

相关文章

  • TypeScript中类型兼容性的示例详解

    TypeScript中类型兼容性的示例详解

    JavaScript是一门弱类型语言，它对类型是弱校验，所以才有了TypeScript。本文就来和大家一起看看TypeScript的类型兼容性的概念和分类，需要的可以参考一下
    2022-08-08
  • JavaScript中九种常用排序算法

    JavaScript中九种常用排序算法

    不同的排序算法，执行效率有着天壤之别，本脚本用JavaScript演示了各种常见的排序算法，包括：冒泡排序、选择排序、插入排序、谢尔排序、快速排序(递归)、快速排序(堆栈)、归并排序、堆排序
    2014-09-09
  • JavaScript实现设置默认日期范围为最近40天的方法分析

    JavaScript实现设置默认日期范围为最近40天的方法分析

    这篇文章主要介绍了JavaScript实现设置默认日期范围为最近40天的方法,结合实例形式分析了javascript结合HTML5 date元素进行时间运算相关操作技巧,需要的朋友可以参考下
    2017-07-07
  • uniapp小程序打包vendor.js过大的问题有哪些有效解决方法

    uniapp小程序打包vendor.js过大的问题有哪些有效解决方法

    在uni-app打包微信小程序时,如果分包中的JS文件被错误地打包到主包的vendor.js中,导致主包过大,这篇文章主要给大家介绍了关于uniapp小程序打包vendor.js过大的问题有哪些有效解决方法,需要的朋友可以参考下
    2025-08-08
  • JavaScript中while循环的基础使用教程

    JavaScript中while循环的基础使用教程

    这篇文章主要给大家介绍了关于JavaScript中while循环的基础使用教程，文中通过示例代码介绍的非常详细，对大家学习或者使用JavaScript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2020-08-08
  • JavaScript中如何跳出forEach循环代码示例

    JavaScript中如何跳出forEach循环代码示例

    循环遍历一个元素是开发中最常见的需求之一,下面这篇文章主要给大家介绍了关于JavaScript中如何跳出forEach循环的相关资料,文章通过代码介绍的非常详细,需要的朋友可以参考下
    2024-06-06
  • js中常见的4种创建对象方式与优缺点

    js中常见的4种创建对象方式与优缺点

    不管是哪门语言,千变万化不离其宗,深入理解其本质,方能应用自如,下面这篇文章主要给大家介绍了关于js中常见的4种创建对象方式与优缺点,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-01-01
  • Visual Studio中js调试的方法图解

    Visual Studio中js调试的方法图解

    这篇文章主要介绍了Visual Studio中JS调试的方法,需要的朋友可以参考下
    2014-06-06
  • JS获取复选框的值,并传递到后台的实现方法

    JS获取复选框的值,并传递到后台的实现方法

    下面小编就为大家带来一篇JS获取复选框的值,并传递到后台的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • 原生js实现日期选择插件

    原生js实现日期选择插件

    这篇文章主要为大家详细介绍了原生js实现日期选择插件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-05-05

最新评论