可編輯下拉框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>無標題文檔</title>

</head>

                     城市:

<select id="name" name="name"

οnkeydοwn="clearSelect(this,event);"

οnkeypress="writeSelect(this,event);" style="width:70px;">

     <option value="">廣州</option>

     <option value="test1">深圳</option>

     <option value="test2">北京</option>

     <option value="test3">珠海</option>

</select>

<script>

function clearSelect(obj,e)

{

     opt = obj.options[0];

     opt.selected = "selected";

     if((e.keyCode== 8) ||(e.charCode==8))//使用退格(backspace)鍵實現逐字刪除的編輯功能

     {

        opt.value =  opt.value.substring(0, opt.value.length>0?opt.value.length-1:0);

        opt.text = opt.value;

     }

}

 

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 οnkeydοwn="forbidBackSpace();">中。

{

    if((event.keyCode == 8) && (event.srcElement.type != "text" && event.srcElement.type != "textarea" && event.srcElement.type != "password"))

    {                                              

        event.keyCode = 0;

        event.returnValue = false;

    }

}

</script>

 

<body>

</body>

</html>

 

發佈了73 篇原創文章 · 獲贊 2 · 訪問量 3068
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章