對這文章發表回應
發表限制: 非會員 可以發表
發表者： 冷日 發表時間： 2011/9/11 8:10:23
冷日：
在 Windows 物件中，下拉選單有個功能，就是可以在使用者輸入任意按鍵時，直接跳至以該按鍵為開頭的那個選項！
在 Web 因為下拉選單本身沒有輸入的功能，所以這個功能冷日一直覺得很可惜！
近日因為客人要求，所以透過 JavaScript 思維了一下這個功能，原型是這個『可供使用者任意輸入顯示與值的下拉選單』：
說明：
上述這一段測試，主要是讓一個 Select 物件可以讓使用者任意輸入資料，資料的顯示（Text）與值（Value）都是使用者輸入的！
並且利用 Select 物件第一個 Option 是空白把使用者輸入的資料塞再該位置，應用的話，您可以把 Select 物件不斷往後擴充（增加 Select 物件的長度）
基於上述的原型，冷日就順手把怨念已久的『跳躍至按鍵所決定之選項』Select 物件也給做出來了：
說明：
事實上原裡很簡單！就是在 Select 物件上增加 onkeypress 這個 event 以掌握使用者輸入。
然後把使用者輸入去 Select 物件裡面走訪一次，看誰符合就把 selected 給設為 True！
這兩個 JavaScript Code 雖然簡單，但是卻讓 Web 上的 Select 物件好用不少，真誠的推薦給大家！
在 Windows 物件中，下拉選單有個功能，就是可以在使用者輸入任意按鍵時，直接跳至以該按鍵為開頭的那個選項！
在 Web 因為下拉選單本身沒有輸入的功能，所以這個功能冷日一直覺得很可惜！
近日因為客人要求，所以透過 JavaScript 思維了一下這個功能，原型是這個『可供使用者任意輸入顯示與值的下拉選單』：
</SCRIPT>
function userSelectInput( object2Edit ){ //提供下拉選單使用者可以自己入資料的功能
object2Edit.options[0] =
new Option(
ok = ( object2Edit.options[0] ) ? object2Edit.options[0].innerText + String.fromCharCode(event.keyCode) : String.fromCharCode(event.keyCode) ,
ok = ( object2Edit.options[0] ) ? object2Edit.options[0].innerText + String.fromCharCode(event.keyCode) : String.fromCharCode(event.keyCode) );
object2Edit.selectedIndex = 0;
}
</SCRIPT>
<select id="test1" onkeypress="(script removed)userSelectInput( this );" >
<option value=""></option>
<option value="a1">a1</option>
<option value="b2">b2</option>
<option value="c3">c3</option>
<option value="c4">c4</option>
</select>
說明：
上述這一段測試，主要是讓一個 Select 物件可以讓使用者任意輸入資料，資料的顯示（Text）與值（Value）都是使用者輸入的！
並且利用 Select 物件第一個 Option 是空白把使用者輸入的資料塞再該位置，應用的話，您可以把 Select 物件不斷往後擴充（增加 Select 物件的長度）
基於上述的原型，冷日就順手把怨念已久的『跳躍至按鍵所決定之選項』Select 物件也給做出來了：
<script>
function changeSelectIndex( obj2change ) { //使用者輸入一碼則會直接跳至以該碼為首的選項
for ( var i = 0 ; i < obj2change.options.length ; i ++ ) {
if ( obj2change.options[i].text == String.fromCharCode(event.keyCode) ) {
obj2change.options[i].selected = true ;
break ;
}
}
}
</script>
<select id="test2" onkeypress="(script removed)changeSelectIndex( this );" >
<option value=""></option>
<option value="a1">a1</option>
<option value="b2">b2</option>
<option value="c3">c3</option>
<option value="c4">c4</option>
</select>
說明：
事實上原裡很簡單！就是在 Select 物件上增加 onkeypress 這個 event 以掌握使用者輸入。
然後把使用者輸入去 Select 物件裡面走訪一次，看誰符合就把 selected 給設為 True！
這兩個 JavaScript Code 雖然簡單，但是卻讓 Web 上的 Select 物件好用不少，真誠的推薦給大家！