Wie kann der Cursor beim Laden der Seite auf ein bestimmtes Eingabefeld fokussiert werden?Fokus Eingabefeld beim Laden
Ist es möglich, den ursprünglichen Textwert beizubehalten und den Cursor am Ende der Eingabe zu platzieren?
<input type="text" size="25" id="myinputbox" class="input-text" name="input2" value = "initial text" />
Es gibt zwei Teile zu Ihrer Frage.
1) Wie fokussiere ich einen Eingang beim Laden der Seite?
Sie können einfach das autofocus Attribut zum Eingang hinzufügen.
Dies wird jedoch möglicherweise nicht in allen Browsern unterstützt, so dass wir Javascript verwenden können.
window.onload = function() {
var input = document.getElementById("myinputbox").focus();
}
2) Wie Cursor am Ende des eingegebenen Textes zu platzieren?
Hier ist eine Nicht-jQuery-Lösung mit etwas geliehenem Code von another SO answer.
function placeCursorAtEnd() {
if (this.setSelectionRange) {
// Double the length because Opera is inconsistent about
// whether a carriage return is one character or two.
var len = this.value.length * 2;
this.setSelectionRange(len, len);
} else {
// This might work for browsers without setSelectionRange support.
this.value = this.value;
}
if (this.nodeName === "TEXTAREA") {
// This will scroll a textarea to the bottom if needed
this.scrollTop = 999999;
}
};
window.onload = function() {
var input = document.getElementById("myinputbox");
if (obj.addEventListener) {
obj.addEventListener("focus", placeCursorAtEnd, false);
} else if (obj.attachEvent) {
obj.attachEvent('onfocus', placeCursorAtEnd);
}
input.focus();
}
Hier ist ein Beispiel, wie ich dies mit jQuery erreichen würde.
<input type="text" autofocus>
<script>
$(function() {
$("[autofocus]").on("focus", function() {
if (this.setSelectionRange) {
var len = this.value.length * 2;
this.setSelectionRange(len, len);
} else {
this.value = this.value;
}
this.scrollTop = 999999;
}).focus();
});
</script>
-Code-Schnipsel:
function focusOnMyInputBox(){
document.getElementById("myinputbox").focus();
}
<body onLoad="focusOnMyInputBox()")>
<input type="text" size="25" id="myinputbox" class="input-text" name="input2" onfocus="this.value = this.value;" value = "initial text" />
Ein tragbarer Weg, dies zu tun, eine benutzerdefinierte Funktion verwendet wie this one (zum Browser behandeln Unterschiede).
Dann Setup ein Handler für die onload am Ende Ihres <body> Tages, als jessegavin schrieb:
window.onload = function() {
document.getElementById("myinputbox").focus();
}
Nur ein Heads-up - Sie jetzt diese mit HTML5 ohne JavaScript für Browser, das es unterstützen können:
<input type="text" autofocus>
Sie wollen wahrscheinlich mit diesem und bauen auf sie mit JavaScript, um einen Rückfall für ältere Browser starten.
Wissen Sie, bewegt das den Cursor bereits an die letzte Stelle im Eingabefeld? –
Ich glaube nicht, dass @ Codex73 versucht zu erreichen, was das Platzhalter-Attribut in HTML5 tut. Es klingt, als ob der Cursor automatisch am Ende des Wertes positioniert werden soll, der gerade in der Eingabe ist. – jessegavin
Sie haben Recht, das ist keine vollständige Lösung. Dies löst jedoch ein paar Dinge (Onload-Autofokus und Platzhaltertext). –
$(document).ready(function() {
$('#id').focus();
});
Dies erfordert jQuery. –
Ja, Sie müssen jQuery-Bibliotheken hinzufügen :) – Nasruddin
Dies ist, was gut für mich funktioniert:
<form name="f" action="/search">
<input name="q" onfocus="fff=1" />
</form>
fff wird eine globale Variable sein, die Namen absolut irrelevant ist und was sein wird darauf abzielen, die generische onload Ereignis zu stoppen Fokus zu zwingen, in diesem Eingang .
<body onload="if(!this.fff)document.f.q.focus();">
<!-- ... the rest of the page ... -->
</body>
Von: http://webreflection.blogspot.com.br/2009/06/inputfocus-something-really-annoying.html
Wenn Sie nicht mit dem BODY-Tag aus irgendeinem Grund hinzufügen können, können Sie diese, nachdem das Formular hinzufügen:
<SCRIPT type="text/javascript">
document.yourFormName.yourFieldName.focus();
</SCRIPT>
Arbeiten fein ...
window.onload = function() {
var input = document.getElementById("myinputbox").focus();
}
Versuchen:
Javascript Pure:
[elem][n].style.visibility='visible';
[elem][n].focus();
JQuery:
[elem].filter(':visible').focus();
Der erste Codeblock tatsächlich vorgeschlagen pla Wenn der Cursor auch am Ende des bestehenden Wertes steht, funktioniert es gut. Ich schätze deine Hilfe. – Codex73