17
Voglio mettere a fuoco il campo inputText in JSF al caricamento della pagina. Come posso implementarlo?Impostare lo stato attivo su input JSF specifico sul caricamento della pagina
A
risposta
23
Se sei già in HTML5 e JSF 2.2, utilizza l'attributo HTML5 autofocus. In JSF 2.2 puoi impostarlo come passthrough attribute.
<html ... xmlns:a="http://xmlns.jcp.org/jsf/passthrough">
...
<h:inputText ... a:autofocus="true" />
È anche possibile impostare in modo condizionale, avete solo bisogno di fare in modo che la condizione false restituisce null, altrimenti l'attributo sarà ancora essere reso. È un attributo booleano HTML, quindi solo la sua presenza è già il trigger indipendentemente dal suo valore. Quando il valore è impostato esplicitamente su null, JSF non renderà l'attributo nella sua interezza.
<h:inputText ... a:autofocus="#{component.valid ? null : true}" />
Un'alternativa sarebbe quella di inserire JavaScript. Ogni elemento di input ha una funzione focus(). L'approccio ingenuo Vanilla JS focalizza il primo elemento della prima forma.
window.onload = function() {
document.forms[0].elements[0].focus();
}
Se si vuole mettere a fuoco un elemento di ingresso specifico durante il caricamento della finestra, quindi fare:
window.onload = function() {
document.getElementById('formId:inputId').focus();
}
Se vi capita di avere jQuery per mano, i controlli a grana più fine potrebbe fare.
$(document).ready(function() {
$(":input:visible:enabled:first").focus()
});
Nel caso in cui avete intenzione di eseguirlo solo dopo un postback, la testa al di sotto correlata D & A:
librerie/componenti di utilità possono avere built-in strutture di autofocus. OmniFaces ha uno <o:highlight> che evidenzia tutti gli input non validi sul postback e autofocus il primo. PrimeFaces mette a fuoco automaticamente l'elemento "ultimo attivo" al completamento di una richiesta Ajax e ha un <p:focus> per un controllo più fine. Vedi anche sotto correlato D & A:
15
Se si utilizza primefaces, è possibile concentrarsi il vostro contributo in questo modo:
<p:focus for="inputId"/>
https://www.primefaces.org/ showcase/ui/misc/focus.xhtml – Andrew
Si noti che l'utilizzo di questo in un pannelloGrid farà casino con il posizionamento ... Posizionalo all'esterno ... Ma poi sembra che debba essere all'interno della stessa forma o qualcosa del genere, quindi guarda per quello anche... – Andrew