返回列表 發帖

搜索提示框

我本來已經寫好了這個功能
但不是透過plugin的方式
有個地方做的不好想來請教一下

我的提示下拉框是用div組成的
即每個符合的字眼都是一個個獨立的div
ex:出現六個符合的字眼的話,那六個都是一行一行的div
出現提示框後一樣可以按上下鍵移動到那些的字上

而我移動的方式
是透過focus到div上
來做這個移動的效果
不過我發現很多網站在上下移動到字眼的過程
focus的光標還是會停留在textfield上

我試過把focus留在textfield上
但似乎無法同時讓下拉的div也有focus的狀態
這樣便無法上下的移動了

是我控制移動的方式有缺點嗎?
還是大部分都不是這樣做的

部份的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
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();
                        }        
                }
        }
每個div內都有個onkeyup事件
所以我必須將foucs放到div上
再來就是如果在focus上的div按上下鍵後的處理

code上我有將textfield focus
不過後面div也focus的話會蓋掉
如果先focus div再focus textfield
則一樣前面的會沒focus的效果了

其他網站是如何達到這種上下移動
卻不會讓textfield內的光標消失

TOP

同時只能有一個 element focus,所以正確的作法應該是 focus 在 textfield 上,
接收上下鍵也是在 textfield,然後再處理顯示選取的 UI

類似的實做很多,可以藉由參考其他人寫好的 code 來學習,可以事半功倍喔
To infinity and beyond!

TOP

我有空再來試著把focus放在textfield來做做看!
目前大概有想到怎麼做了

其實會有這個困擾的主因
是因為當頁面高度過長有scroll bar的時候
按下鍵移到選項時 scroll bar也會跟著動一下
所以我才在想是不是把focus放到textfield可以避免這種情形

不過假日上youtube看影片時
發現youtube雖然光標是停留在textfield上
也會有我說哪種情形
按下鍵也會控制到scroll bar
但yahoo的就不會

總之我還是先試試吧!

[ 本帖最後由 WILLIAMer 於 2009-7-20 11:04 編輯 ]

TOP

剛花了一點時間修改一下
順利的避免掉這個問題

還好一開始推測focus到textfield的想法也沒有錯

感謝wmh大的幫忙啦!

TOP

返回列表 回復 發帖