web-dev-qa-db-ja.com

ページの読み込み時に特定のJSFinputTextにフォーカスを設定する

ページの読み込み時にJSFのinputTextフィールドにフォーカスを設定したい。どうすればこれを実装できますか？

jsffocus
19
MohammedYakub Moriswala

すでにHTML5とJSF2.2を使用している場合は、HTML5 autofocus属性を使用してください。 JSF 2.2では、これを パススルー属性 として設定できます。

<html ... xmlns:a="http://xmlns.jcp.org/jsf/passthrough">
...
<h:inputText ... a:autofocus="true" />

条件付きで設定することもできます。false条件がnullと評価されることを確認するだけで済みます。そうでない場合、属性は引き続きレンダリングされます。これはHTMLブール属性であるため、値に関係なく、その存在のみが既にトリガーになっています。値が明示的にnullに設定されている場合、JSFは属性全体をレンダリングしません。

<h:inputText ... a:autofocus="#{component.valid ? null : true}" />

別の方法は、JavaScriptを投入することです。すべての入力要素には focus（） 関数があります。以下の素朴なVanillaJSアプローチは、最初のフォームの最初の要素に焦点を当てています。

window.onload = function() {
    document.forms[0].elements[0].focus();
}

ウィンドウのロード中に特定の入力要素にフォーカスする場合は、次のようにします。

window.onload = function() {
    document.getElementById('formId:inputId').focus();
}

JQueryが手元にある場合は、よりきめ細かいチェックを行うことができます。

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

ポストバック後にのみ実行する場合は、以下の関連するQ＆Aに進んでください。

ユーティリティ/コンポーネントライブラリには、オートフォーカス機能が組み込まれている場合があります。 OmniFaces には <o:highlight> これは、ポストバックですべての無効な入力を強調表示し、最初の入力を自動フォーカスします。 PrimeFaces デフォルトでは、ajaxリクエストの完了時に「最後のアクティブ」要素にオートフォーカスし、 <p:focus> よりきめ細かい制御。以下の関連するQ＆Aも参照してください。

27
BalusC

Primefacesを使用する場合は、次のように入力に焦点を合わせることができます。

<p:focus for="inputId"/>
18
John Alexander Betts