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