快捷導(dǎo)航

js?select支持手動輸入功能實現(xiàn)代碼

更新時間：2023年05月16日 00:32:10 作者：小魚娟娟

這篇文章主要介紹了js?select支持手動輸入實現(xiàn)代碼,需要的朋友可以參考下

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;
  }

使用方法

<!--調(diào)用-->
<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>

到此這篇關(guān)于js select支持手動輸入功能實現(xiàn)代碼的文章就介紹到這了,更多相關(guān)js select 手動輸入內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

TypeScript中類型兼容性的示例詳解
JavaScript是一門弱類型語言，它對類型是弱校驗，所以才有了TypeScript。本文就來和大家一起看看TypeScript的類型兼容性的概念和分類，需要的可以參考一下
2022-08-08
JavaScript中九種常用排序算法
不同的排序算法，執(zhí)行效率有著天壤之別，本腳本用JavaScript演示了各種常見的排序算法，包括：冒泡排序、選擇排序、插入排序、謝爾排序、快速排序(遞歸)、快速排序(堆棧)、歸并排序、堆排序
2014-09-09
JavaScript實現(xiàn)設(shè)置默認日期范圍為最近40天的方法分析
這篇文章主要介紹了JavaScript實現(xiàn)設(shè)置默認日期范圍為最近40天的方法,結(jié)合實例形式分析了javascript結(jié)合HTML5 date元素進行時間運算相關(guān)操作技巧,需要的朋友可以參考下
2017-07-07
uniapp小程序打包vendor.js過大的問題有哪些有效解決方法
在uni-app打包微信小程序時,如果分包中的JS文件被錯誤地打包到主包的vendor.js中,導(dǎo)致主包過大,這篇文章主要給大家介紹了關(guān)于uniapp小程序打包vendor.js過大的問題有哪些有效解決方法,需要的朋友可以參考下
2025-08-08
JavaScript中while循環(huán)的基礎(chǔ)使用教程
這篇文章主要給大家介紹了關(guān)于JavaScript中while循環(huán)的基礎(chǔ)使用教程，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2020-08-08
JavaScript中如何跳出forEach循環(huán)代碼示例
循環(huán)遍歷一個元素是開發(fā)中最常見的需求之一,下面這篇文章主要給大家介紹了關(guān)于JavaScript中如何跳出forEach循環(huán)的相關(guān)資料,文章通過代碼介紹的非常詳細,需要的朋友可以參考下
2024-06-06
js中常見的4種創(chuàng)建對象方式與優(yōu)缺點
不管是哪門語言,千變?nèi)f化不離其宗,深入理解其本質(zhì),方能應(yīng)用自如,下面這篇文章主要給大家介紹了關(guān)于js中常見的4種創(chuàng)建對象方式與優(yōu)缺點,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-01-01
Visual Studio中js調(diào)試的方法圖解
這篇文章主要介紹了Visual Studio中JS調(diào)試的方法,需要的朋友可以參考下
2014-06-06
JS獲取復(fù)選框的值,并傳遞到后臺的實現(xiàn)方法
下面小編就為大家?guī)硪黄狫S獲取復(fù)選框的值,并傳遞到后臺的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-05-05
原生js實現(xiàn)日期選擇插件
這篇文章主要為大家詳細介紹了原生js實現(xiàn)日期選擇插件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-05-05