[Javascript] 如何將焦點設置為獨立於id的HTML表單中的第一個輸入元素?


Answers

儘管這不能回答這個問題(需要一個通用腳本),但是我認為HTML5引入了'自動聚焦'(autofocus)屬性對於其他人可能是有用的:

<form>
  <input type="text" name="username" autofocus>
  <input type="password" name="password">
  <input type="submit" value="Login">
</form>

潛入HTML5有更多的信息。

Question

有沒有一種簡單的方法來設置網頁 的焦點 (輸入光標)的第一個輸入元素 (文本框,下拉列表,...)加載頁面,而不必知道元素的ID?

我想實現它作為我的Web應用程序的所有我的頁面/窗體的通用腳本。




將這段代碼放在body標籤的最後,會自動將第一個可見,非隱藏的啟用元素聚焦在屏幕上。 它將處理我可以在短時間內提出的大多數情況。

<script>
    (function(){
        var forms = document.forms || [];
        for(var i = 0; i < forms.length; i++){
            for(var j = 0; j < forms[i].length; j++){
                if(!forms[i][j].readonly != undefined && forms[i][j].type != "hidden" && forms[i][j].disabled != true && forms[i][j].style.display != 'none'){
                    forms[i][j].focus();
                    return;
                }
            }
        }
    })();
</script>






我發現最全面的jQuery表達式是(通過這裡的幫助)

$(document).ready(function() {
    $('input:visible:enabled:first').focus();
});



這包括textareas和排除單選按鈕

$(document).ready(function() {
    var first_input = $('input[type=text]:visible:enabled:first, textarea:visible:enabled:first')[0];
    if(first_input != undefined){ first_input.focus(); }
});



對於那些使用JSF2.2 +並且無法將自動對焦作為無價值的屬性傳遞給它的人,請使用:

 p:autofocus="true"

並將其添加到命名空間p(也經常用pt。不管你喜歡什麼)。

<html ... xmlns:p="http://java.sun.com/jsf/passthrough">