使用js實(shí)現(xiàn)一個(gè)可編輯的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)鍵實(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的返回上一頁(yè)功能,和本下拉框的編輯功能沖突,需要禁掉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 文本框后面加上說(shuō)明文字+下拉列表選中值后觸發(fā)事件
- javascript級(jí)聯(lián)下拉列表實(shí)例代碼(自寫)
- javascript獲取下拉列表框當(dāng)中的文本值示例代碼
- JavaScript實(shí)現(xiàn)下拉列表效果
相關(guān)文章
JS實(shí)現(xiàn)網(wǎng)頁(yè)上隨機(jī)產(chǎn)生超鏈接地址的方法
這篇文章主要介紹了JS實(shí)現(xiàn)網(wǎng)頁(yè)上隨機(jī)產(chǎn)生超鏈接地址的方法,涉及JavaScript隨機(jī)數(shù)的相關(guān)使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11layui下拉列表select實(shí)現(xiàn)可輸入查找的方法
今天小編就為大家分享一篇layui下拉列表select實(shí)現(xiàn)可輸入查找的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09JS中的oninput和onchange事件的區(qū)別及如何正確使用
在JavaScript中,oninput和onchange事件是用于處理用戶輸入的常見(jiàn)事件,本文將介紹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-05Bootstrap的Refresh Icon也spin起來(lái)
本文通過(guò)實(shí)例給大家介紹Bootstrap的Refresh Icon相關(guān)知識(shí),非常不錯(cuò),具有參考借鑒價(jià)值,感興趣的朋友一起學(xué)習(xí)吧2016-07-07mvvm雙向綁定機(jī)制的原理和實(shí)現(xiàn)代碼(推薦)
下面小編就為大家?guī)?lái)一篇mvvm雙向綁定機(jī)制的原理和實(shí)現(xiàn)代碼(推薦)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06詳解組件庫(kù)的webpack構(gòu)建速度優(yōu)化
這篇文章主要介紹了詳解組件庫(kù)的webpack構(gòu)建速度優(yōu)化,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-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