使用js實現(xiàn)一個可編輯的select下拉列表

更新時間：2014年02月20日 10:05:56 作者：

這篇文章主要介紹了使用js實現(xiàn)一個可編輯的select下拉列表，個人感覺還不錯,需要的朋友可以參考下

 
<select id="name" name="name" 
onkeydown="clearSelect(this,event);" 
onkeypress="writeSelect(this,event);" style="width:70px;"> 
<option value=""></option> 
<option value="test1">test1</option> 
<option value="test2">test2</option> 
<option value="test3">test3</option> 
</select> 

<script> 
function clearSelect(obj,e) 
{ 
opt = obj.options[0]; 
opt.selected = "selected"; 
if((e.keyCode== 8) ||(e.charCode==8))//使用退格（backspace）鍵實現(xiàn)逐字刪除的編輯功能 
{ 
opt.value = opt.value.substring(0, opt.value.length>0?opt.value.length-1:0); 
opt.text = opt.value; 
} 
if((e.keyCode== 46) ||(e.charCode==46))//使用刪除（Delete）鍵實現(xiàn)逐字刪除的編輯功能 
{ 
opt.value = ""; 
opt.text = opt.value; 
} 
//還可以實現(xiàn)其他按鍵的響應(yīng) 
} 

function writeSelect(obj,e) 
{ 
opt = obj.options[0]; 
opt.selected = "selected"; 
opt.value += String.fromCharCode(e.charCode||e.keyCode); 
opt.text = opt.value; 
} 
function forbidBackSpace()//為了在IE中，避免backspace的返回上一頁功能，和本下拉框的編輯功能沖突，需要禁掉backspace的功能。forbidBackSpace可以寫在<body onkeydown="forbidBackSpace();">中。 
{ 
if((event.keyCode == 8) && (event.srcElement.type != "text" && event.srcElement.type != "textarea" && event.srcElement.type != "password")) 
{ 
event.keyCode = 0; 
event.returnValue = false; 
} 
} 
</script> 

您可能感興趣的文章:

相關(guān)文章

JavaScript手寫Promise核心原理
這篇文章主要介紹了JavaScript手寫Promise核心原理，promise?可以說是出場率很高的api了，這篇文章手寫一版promise,可以加強(qiáng)對promise的認(rèn)識
2022-06-06
JavaScript實現(xiàn)漢字轉(zhuǎn)換為拼音及縮寫的方法示例
這篇文章主要介紹了JavaScript實現(xiàn)漢字轉(zhuǎn)換為拼音及縮寫的方法,結(jié)合實例形式分析了javascript數(shù)組遍歷、轉(zhuǎn)換實現(xiàn)漢字轉(zhuǎn)拼音相關(guān)操作技巧,需要的朋友可以參考下
2019-03-03
uni-app?微信小程序授權(quán)登錄的實現(xiàn)步驟
本文主要介紹了uni-app?微信小程序授權(quán)登錄的實現(xiàn)步驟，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-01-01
BootStrap下的彈出框加載select2框架失敗的解決方法
本文通過簡單的代碼給大家介紹了BootStrap下的彈出框加載select2框架失敗的解決方法，需要的朋友參考下吧
2017-08-08
JavaScript和jQuery制作光棒效果
本文主要介紹了使用javaScript和jQuery制作光棒效果的示例代碼，具有很好的參考價值，下面跟著小編一起來看下吧
2017-02-02
使用TypeScript?V8來改進(jìn)您的JavaScript代碼
TypeScript?V8是一個強(qiáng)大的JavaScript類型系統(tǒng),它可以幫助你發(fā)現(xiàn)JavaScript代碼中的錯誤和潛在問題,并在編譯時捕獲它們,以便您可以解決它們,TypeScript?V8為JavaScript提供一系列的類型注釋,包括自定義類型和其他高級功能
2023-08-08
JavaScript中的數(shù)組使用方法詳解
JavaScript數(shù)組是一種特殊類型的對象,用于存儲多個值,數(shù)組中的每個值都有一個索引,索引從0開始,數(shù)組中的值可以是任何數(shù)據(jù)類型,包括數(shù)字、字符串、布爾值、對象和函數(shù),
2024-10-10
基于es6三點運算符的使用方法(實例講解)
下面小編就為大家?guī)硪黄谌c運算符的使用方法(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-10-10
動態(tài)修改DOM 里面的 id 屬性的弊端分析
我不知道是否有什么標(biāo)準(zhǔn)規(guī)定不允許修改id屬性，或者不建議修改id屬性，總之IE對此支持不佳。
2008-09-09
前端大屏開發(fā)3種主流適配方案總結(jié)
這篇文章主要介紹了前端大屏開發(fā)3種主流適配方案的相關(guān)資料,分別是vwvh方案、scale方案和rem+vwvh方案,每種方案都有其優(yōu)缺點,可以根據(jù)具體需求選擇合適的方法,需要的朋友可以參考下
2025-03-03