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



Answers

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

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

潛入HTML5有更多信息。

Question

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

我想將它作為我的Web應用程序的所有頁面/表單的通用腳本來實現。




這包括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(); }
});



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

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



將此代碼放在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>






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

 p:autofocus="true"

並將其添加到名稱空間p(也經常使用pt。無論你喜歡什麼)。

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



這將得到第一個可見的常見輸入,包括textareas和選擇框。 這也確保它們不被隱藏,禁用或只讀。 它也允許我在我的軟件中使用目標div(即,此表單中的第一個輸入)。

$("input:visible:enabled:not([readonly]),textarea:visible:enabled:not([readonly]),select:visible:enabled:not([readonly])", 
    target).first().focus();



Links