Wie kann man auf ein HTML-Eingabeelement konzentrieren, ohne die gesamten HTML zu haben?

StackOverflow https://stackoverflow.com/questions/808908

  •  03-07-2019
  •  | 
  •  

Frage

Zunächst wird der Hintergrund: Ich arbeite in Tapestry 4, so dass der HTML-Code für jede gegebene Seite genäht zusammen aus verschiedenen Stücken von HTML in der gesamten Anwendung verstreut. Für die Komponente ich arbeite ich nicht die <body>-Tag, damit ich es nicht ein onload Attribut geben kann.

Die Komponente hat ein Eingangselement, das den Fokus, wenn die Seite geladen werden muss. Kennt jemand eine Möglichkeit, den Fokus auf eine Datei-Eingabe (oder einen anderen Text-Typ-Eingang) auf Seite Last ohne Zugriff auf den Body-Tag zu setzen?

Ich habe Skript in den Körper versucht, das Einfügen wie
document.body.setAttribute('onload', 'setFocus()')
(wo setFocus ist eine Funktion, um den Fokus auf das Dateieingabeelement Einstellung), aber das hat nicht funktioniert. Ich kann nicht sagen, dass ich von dieser obwohl überrascht wurde.

EDIT:
Wie erwähnt, muss ich in der Tat dies mit einer Seite Komponente tun. I ended Dateityp Eingaben in das Skript bis Hinzufügen wir Fokus verwenden, um den ersten editierbare und sichtbaren Eingang auf einer Seite zu geben. Bei der Erforschung dieses Problems habe festgestellt, das ich keine Probleme mit der Sicherheit zu tun.

War es hilfreich?

Lösung

Das hat gut funktioniert für mich: 

<script>
  function getLastFormElem(){
    var fID = document.forms.length -1;
    var f = document.forms[fID];
    var eID = f.elements.length -1;
    return f.elements[eID];
  }
</script>


<input name="whatever" id="maybesetmaybenot" type="text"/>
<!-- any other code except more form tags -->

<script>getLastFormElem().focus();</script>

Andere Tipps

<script>
window.onload = function()  {
     document.getElementById('search_query').select();
    //document.getElementById('search_query').value = ''; 
    // where 'search_query' will be the id of the input element
};
</script>

muss nützlich sein, ich denke !!!

Sie können das Fenster einen onload-Handler geben 

window.onload = setFocus;

Ich glaube, Sie ein grundsätzliches Problem mit Ihrer Verkapselung haben. Obwohl in den meisten Fällen können Sie einen Ereignishandler onload Ereignis anhängen - siehe http: // ejohn .org / projects / flexible-javascript-event / von John Resig, wie dies zu tun, muß setFocus von einer Seite Komponente verwaltet werden, da Sie nicht zwei Komponenten auf Ihrer Seite haben können verlangen, dass sie den Fokus erhalten wenn die Seite geladen wird.

Versuchen Sie, mit spielen tabstop Attribut

Zu allererst die Eingabedatei nicht das gleiche ist wie die anderen Eingänge, müssen Sie dies im Auge behalten .... das sind aus Sicherheitsgründen. Wenn die Eingabedatei Fokus erhalten sollte es nur gelesen werden, oder der Browser einen Dialog erscheinen sollte eine Datei wählen.

Nun, für die anderen Eingänge könnten Sie einige Onload-Ereignis auf einige Ihrer Elemente versuchen ... (nicht nur der Körper das Onload-Ereignis haben) oder könnten Sie Inline-Javascript in der Mitte des HTML verwenden. Wenn Sie JavaScript-Code setzen, ohne dass zu sagen eine Funktion führt er bekommt, während der Browser es liest. So etwas wie: 

<script type="text/javascript">

function yourFunction()
{
   ...;
};

alert('hello world!");

yourFunction();

</script>

Die Funktion wird unmittelbar nach dem Alarm ausgeführt werden, wenn der Browser liest es.

Wenn Sie können, sollten Sie jQuery verwenden, um Ihre Javascript zu tun. Es wird Ihr Live soooo viel leicht machen ....:)

Mit jQuery könnte wie folgt geschehen: 

$(function() {
    $("input:file").eq(0).focus()
})

Mit einem normalen Javascript wie dies geschehen könnte: 

var oldWindowOnload = window.onload; // be nice with other uses of onload 
window.onload = function() {
    var form = document.forms[0];
    for(i=0; i < form.length; i++) {
        if (form[i].type == "file") {
            form[i].focus();
        }
    }
    oldWindowOnload();
}

Für aufwendigere Lösung mit einfachen Javascript finden Sie unter Fokus in ersten Eingang auf Web-Seite auf Codeproject.

Scunliffe-Lösung hat einen Usability Vorteil.

Wenn Seite Skripte langsam laden, ruft Fokus () von „onLoad“ Ereignis eine sehr unangenehme Seite „Sprung“ macht, wenn der Benutzer scrollt die Seite weg. Das ist also ein benutzerfreundlicherer Ansatz: 

<input id="..."></input>
... really small piece of HTML ...
<script>getTheDesiredInput().focus();</script>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top