搜索提示框
我本來已經寫好了這個功能但不是透過plugin的方式
有個地方做的不好想來請教一下
我的提示下拉框是用div組成的
即每個符合的字眼都是一個個獨立的div
ex:出現六個符合的字眼的話,那六個都是一行一行的div
出現提示框後一樣可以按上下鍵移動到那些的字上
而我移動的方式
是透過focus到div上
來做這個移動的效果
不過我發現很多網站在上下移動到字眼的過程
focus的光標還是會停留在textfield上
我試過把focus留在textfield上
但似乎無法同時讓下拉的div也有focus的狀態
這樣便無法上下的移動了
是我控制移動的方式有缺點嗎?
還是大部分都不是這樣做的 部份的code
提示框的部份[code]<div id="sug'+i+'"'+' onmouseover="javascript:suggestOver(this);"
'onmouseout="javascript:suggestOut(this);"
'onclick="javascript:setSearch(this.innerHTML);"
'onkeyup="javascript:keyHandler(this,event);"
'class="suggest_link">' + str[i ] + '</div>[/code]控制移動的code[code]function keyHandler(obj,eve){
var key = window.event ? eve.keyCode : eve.which;
var DivText = document.getElementById("Keyword");
if(key == 13){
...
}else if(key == 38){
if(obj.previousSibling!=null){
DivText.focus();
obj.blur();
obj.onmouseout();
obj.previousSibling.focus();
obj.previousSibling.onmouseover();
}else{
DivText.focus();
obj.blur();
obj.onmouseout();
}
}else if(key == 40){
if(obj.nextSibling!=null){
DivText.focus();
obj.blur();
obj.onmouseout();
obj.nextSibling.focus();
obj.nextSibling.onmouseover();
}else{
DivText.focus();
obj.blur();
obj.onmouseout();
}
}
}[/code]每個div內都有個onkeyup事件
所以我必須將foucs放到div上
再來就是如果在focus上的div按上下鍵後的處理
code上我有將textfield focus
不過後面div也focus的話會蓋掉
如果先focus div再focus textfield
則一樣前面的會沒focus的效果了
其他網站是如何達到這種上下移動
卻不會讓textfield內的光標消失 同時只能有一個 element focus，所以正確的作法應該是 focus 在 textfield 上，
接收上下鍵也是在 textfield，然後再處理顯示選取的 UI
類似的實做很多，可以藉由參考其他人寫好的 code 來學習，可以事半功倍喔 我有空再來試著把focus放在textfield來做做看!
目前大概有想到怎麼做了
其實會有這個困擾的主因
是因為當頁面高度過長有scroll bar的時候
按下鍵移到選項時 scroll bar也會跟著動一下
所以我才在想是不是把focus放到textfield可以避免這種情形
不過假日上youtube看影片時
發現youtube雖然光標是停留在textfield上
也會有我說哪種情形
按下鍵也會控制到scroll bar
但yahoo的就不會
總之我還是先試試吧!
[[i] 本帖最後由 WILLIAMer 於 2009-7-20 11:04 編輯 [/i]] 剛花了一點時間修改一下
順利的避免掉這個問題
還好一開始推測focus到textfield的想法也沒有錯
感謝wmh大的幫忙啦!
頁:
[1]