使用jquery查找下一個最接近的可聚焦元素？

我希望我的文本框具有這樣的功能，即每次用戶按下回車鍵時，只要它們可以聚焦，它將聚焦到下一個最接近的元素（輸入，複選框，按鈕，廣播，選擇，a，div）。我如何使用jQuery來做到這一點？使用jquery查找下一個最接近的可聚焦元素？

2013-01-02 sadcat

你有什麼試過？順便說一句，請定義'最接近'。哦，另一件事，教用戶，也許你自己也使用TAB鍵。 – gdoron

瀏覽器已經在TAB印刷上做到了這一點。輸入也有不同的含義...你爲什麼想要顛覆它？ –

下一個最接近的是你想要輸入的控件，而不是前一個 – sadcat

順便說一句，這是一個合法的技術問題，很可能是一個業務需求。我被要求在後臺應用程序中建立這樣的行爲。有很多原生應用程序的行爲是這樣的。

我通過使用帶有contenteditable = true的DIV構建我的表單來解決這個問題，如下例所示。

<html> 
<head> 
    <style type="text/css"> 

    div.input { border:1px solid #aaa; width:300px; } 

    </style> 

</head> 
<body> 

    <div contenteditable="true" class="input"><strong>explore the world,</strong> e.g. paris, france</div> 

</body> 
</html>

你可以捕捉的ENTER鍵事件和使用JQuery的下一個同級只需設置焦點。

讓我知道你是否需要進一步澄清。

希望這會有所幫助。祝你好運。

來源

2013-01-02 17:03:45

我以前就已經這樣做過。試試我的解決方案在這裏http://jsfiddle.net/R8PhF/3/

$(document).ready(function(){ 
    $('#mytextbox').keyup(function(e){ 
     var code = (e.keyCode ? e.keyCode : e.which); 
     if(code == 13) { 
      var tabables = $("*[tabindex != '-1']:visible"); 
      var index = tabables.index(this); 
      tabables.eq(index + 1).focus(); 
     }   
    }); 
});

來源

2013-01-02 17:05:45 phnkha

感謝您的建設性反饋和理解問題。 +1 –

這不處理自定義選項卡索引，我不認爲。所以它可能適用於某個用例，但不是全部。 – Scott

這也是一個無效的可選焦點選擇器。它需要排除tabIndex = -1，將其限制爲適當的元素和約束，幷包含tabIndex = 0的任何內容（如傳統上不可聚焦的div）。這不完全是你想要的，但這是一個更好的開始。選擇器是唯一需要改變才能使其工作的選擇。還有一個可用於'：focusable'的jQuery UI選擇器。（小提琴顯示破碎，更新過濾器以使其起作用。）http://jsfiddle.net/b45rw/ – Scott

算法明智：

記住，可以集中所有元素的列表。做不是依靠這個DOM。你必須自己保留名單。如果你不知道頁面上的哪些元素，你已經做了錯誤的事情。 DOM是視圖而不是數據存儲區，對其進行相應處理。許多使用jQuery的新手犯了這個錯誤，使用jQuery這個錯誤很容易做出。
查找頁面上所有可聚焦元素的位置。按照1.最好的方式當然是知道所有元素的相對位置，即使不看DOM。有了jQuery，你可以使用.dimension()。你可能需要做一些記錄來保持這個列表是最新的（即當你的數據/視圖發生變化時）。
找到當前被聚焦元素的位置。
使用一些算法將它與其他職位列表進行比較，並得到最接近（這可能意味着很多事情，你可能知道你想要什麼）。
然後將焦點設置爲元素。

在這裏可以做出很多選擇，有些依賴於性能，另一些依賴於交互和界面設計。

來源

2013-01-02 17:09:23 Halcyon

+1不考慮DOM是數據存儲。 – Tvaroh

-1表示使用DOM API作爲將文檔描述爲對象的模型的應用程序編程接口在某種程度上是反模式。 OP期望確定的瀏覽器行爲是瀏覽器本身推斷使用DOM的東西。作者不僅嘗試使用相同的邏輯，而且通過反覆試驗來做到這一點，而且人類觀察和維護基本上是反編程方法，這不僅是完全合理的。 – Barney

@Barney這不是我所建議的。我很久以前發佈了這個，所以我不知道我的確切想法是什麼。像'$（「* [tabindex！='-1']：visible」）;'查詢DOM並嘗試派生哪個元素是_next_。但是，當你渲染輸入元素時，你已經知道你在渲染它們的順序，所以你不需要查詢DOM。只要邏輯簡單，_jQuery_方法就可以工作，但只要你引入一點複雜性（例如：跳過一個字段，跳過按鈕，最後一個字段應該提交），你最終會得到奇怪的代碼。 – Halcyon

使用jquery查找下一個最接近的可聚焦元素？

回答

相關問題