使用js實(shí)現(xiàn)一個(gè)可編輯的select下拉列表
更新時(shí)間:2014年02月20日 10:05:56 作者:
這篇文章主要介紹了使用js實(shí)現(xiàn)一個(gè)可編輯的select下拉列表,個(gè)人感覺還不錯(cuò),需要的朋友可以參考下
復(fù)制代碼 代碼如下:
<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)鍵實(shí)現(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)鍵實(shí)現(xiàn)逐字刪除的編輯功能
{
opt.value = "";
opt.text = opt.value;
}
//還可以實(shí)現(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>
您可能感興趣的文章:
- js實(shí)現(xiàn)下拉列表選中某個(gè)值的方法(3種方法)
- jquery用ajax方式從后臺(tái)獲取json數(shù)據(jù)后如何將內(nèi)容填充到下拉列表
- jquery+json 通用三級(jí)聯(lián)動(dòng)下拉列表
- javaScript年份下拉列表框內(nèi)容為當(dāng)前年份及前后50年
- js獲取下拉列表框<option>中的value和text的值示例代碼
- javascript實(shí)現(xiàn)在下拉列表中顯示多級(jí)樹形菜單的方法
- extJs 文本框后面加上說明文字+下拉列表選中值后觸發(fā)事件
- javascript級(jí)聯(lián)下拉列表實(shí)例代碼(自寫)
- javascript獲取下拉列表框當(dāng)中的文本值示例代碼
- JavaScript實(shí)現(xiàn)下拉列表效果
相關(guān)文章
JS實(shí)現(xiàn)網(wǎng)頁上隨機(jī)產(chǎn)生超鏈接地址的方法
這篇文章主要介紹了JS實(shí)現(xiàn)網(wǎng)頁上隨機(jī)產(chǎn)生超鏈接地址的方法,涉及JavaScript隨機(jī)數(shù)的相關(guān)使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11layui下拉列表select實(shí)現(xiàn)可輸入查找的方法
今天小編就為大家分享一篇layui下拉列表select實(shí)現(xiàn)可輸入查找的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09JS中的oninput和onchange事件的區(qū)別及如何正確使用
在JavaScript中,oninput和onchange事件是用于處理用戶輸入的常見事件,本文將介紹oninput和onchange事件的區(qū)別,以及如何在實(shí)際開發(fā)中正確使用它們,感興趣的朋友跟隨小編一起看看吧2023-10-10微信小程序開發(fā)實(shí)現(xiàn)的IP地址查詢功能示例
這篇文章主要介紹了微信小程序開發(fā)實(shí)現(xiàn)的IP地址查詢功能,可實(shí)現(xiàn)基于第三方接口的IP地址查詢功能,需要的朋友可以參考下2019-03-03js流動(dòng)式效果顯示當(dāng)前系統(tǒng)時(shí)間
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)流動(dòng)式時(shí)間效果的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-05-05mvvm雙向綁定機(jī)制的原理和實(shí)現(xiàn)代碼(推薦)
下面小編就為大家?guī)硪黄猰vvm雙向綁定機(jī)制的原理和實(shí)現(xiàn)代碼(推薦)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06typescript環(huán)境安裝并開啟VSCode自動(dòng)監(jiān)視編譯ts文件為js文件
這篇文章主要介紹了安裝typescript環(huán)境并開啟VSCode自動(dòng)監(jiān)視編譯ts文件為js文件,本文教大家最基礎(chǔ)的安裝和配置自動(dòng)監(jiān)視ts文件編譯成js文件,需要的朋友可以參考下2022-06-06