Wie setze ich den Cursor auf das Eingabefeld in Javascript?

77 
document.getElementById(frmObj.id).value="";
document.getElementById(frmObj.id).autofocus;
document.getElementById("errorMsg").innerHTML = "Only numeric value is allowed";

Im obigen Code ist der Wert des Formularobjekts perfekt eingestellt, ""aber das Textfeld enthält keinen Cursor. Ich möchte, dass ein Cursor da ist. focus()fokussiert nur dieses Eingabefeld, setzt den Cursor jedoch nicht.

javascript dom-events Yukti Kamra
quelle
1
document.getElementById(fieldID).focus();sollte den blinkenden Cursor in das Formularfeld setzen, es sei denn, Sie haben etwas anderes, das den Fokus auf der Seite erfasst. Die Aussage mit .autofocus, die Sie jetzt haben, macht nichts
mplungjan
1
.focus()setzt den Cursor. Dies ist die ganze Bedeutung der Fokusaktion.
Schatten-Assistent ist Ohr für Sie
1
Wenn der Fokus nicht funktioniert, würde ich versuchen, click ()
Oriesok Vlassky
2
Zukünftige Leser: Stellen Sie außerdem sicher, dass das Element, auf das Sie abzielen, dem DOM hinzugefügt wurde. Ich habe Elemente im Skript erstellt und focus () aufgerufen, bevor ich sie angehängt habe. Das Ändern der Bestellung hat das Problem für mich behoben.
Matthew R.

Antworten:

103

Konzentrieren Sie sich in JavaScript zuerst auf das Steuerelement und wählen Sie dann das Steuerelement aus, um den Cursor auf texbox anzuzeigen ...

document.getElementById(frmObj.id).focus();
document.getElementById(frmObj.id).select();

oder mit jQuery 

$("#textboxID").focus();
Talha
quelle
11
Die Auswahl ist nicht erforderlich. Mit seinem Code ist noch etwas los. Möglicherweise ein eingebettetes PDF oder ähnliches
mplungjan
1
Ich möchte, dass der Cursor im Textfeld vorhanden sein sollte. Ich sollte nicht in das Textfeld klicken, um einen Wert einzugeben.
Yukti Kamra
In meinem Fall hat die Auswahl den Code NICHT funktionieren lassen. Sie wollen nur den Fokus ();
Greg Blass
56

Mir ist klar, dass dies eine ziemlich alte Frage ist, aber ich habe eine "dumme" Lösung für ein ähnliches Problem, die vielleicht jemandem helfen könnte.

Ich hatte das gleiche Problem mit einem Textfeld, das als ausgewählt angezeigt wurde (mit der Focus-Methode in JQuery), aber den Cursor nicht aufgenommen hat.

Tatsache ist, dass ich das Debugger-Fenster geöffnet hatte, um zu sehen, was passiert, und DIESES Fenster den Fokus stahl. Die Lösung ist banal einfach: Schließen Sie einfach den Debugger und alles ist in Ordnung ... 1 Stunde Testzeit!

Orionis
quelle
Ich habe versucht, ein <span>Element fokussierbar zu machen, und dies war schließlich das Problem (ich bin froh, dass ich die erste akzeptierte Antwort bestanden habe). Ich habe auch festgestellt, dass es HTML-Elemente gibt, die standardmäßig nicht fokussierbar sind (scheint browserspezifisch zu sein). Das <span>Element ist eines dieser Elemente, weshalb Chrome (Version 57) das Fenster der Entwicklertools in den Mittelpunkt stellte.
Larrylampco
Diese Kommentare haben mir Minuten statt Stunden gespart!
user1503941
7

Manchmal erhalten Sie Fokus, aber keinen Cursor in einem Textfeld. In diesem Fall würden Sie Folgendes tun:

document.getElementById(frmObj.id).select();
Alexander Pawlow
quelle
Ja, dies ist manchmal richtig, wenn es einen Übergang gibt .focus () funktioniert nicht. Sie müssen $ ("element") [0] .select () verwenden, um den Cursor zu erhalten
imal hasaranga perera
1
oder el.setSelectionRange (el.value.length, el.value.length); um den Cursor am Ende der Zeile zu erhalten.
Vektor
Hinweis: setSelectionRangewürde NICHT funktionieren<input type="number"/>
Vandesh
2

Eines der Dinge, die Sie beißen können, ist, wenn Sie es .onmousedownals Benutzerinteraktion verwenden. Wenn Sie dies tun und dann sofort versucht wird, ein Feld auszuwählen, geschieht dies nicht, da die Maus auf etwas anderes gedrückt wird . Wechseln Sie also zu .onmouseupund Viola, focus()funktioniert jetzt , da sich die Maus in einem nicht angeklickten Zustand befindet, wenn versucht wird, den Fokus zu ändern.

Fyngyrz
quelle
1

Sie haben nicht genügend Code bereitgestellt, um Ihnen zu helfen. Sie senden wahrscheinlich das Formular und laden die Seite neu. ODER Sie haben ein Objekt auf der Seite wie eine eingebettete PDF-Datei, die den Fokus stiehlt.

Hier ist die kanonische einfache Javascript-Methode zum Validieren eines Formulars. Sie kann mit onubtrusivem JS verbessert werden, wodurch das Inline-Skript entfernt wird. Dies ist jedoch der Ausgangspunkt für DEMO 

function validate(formObj) {
  document.getElementById("errorMsg").innerHTML = "";    
  var quantity = formObj.quantity;
  if (isNaN(quantity)) {
    quantity.value="";
    quantity.focus();
    document.getElementById("errorMsg").innerHTML = "Only numeric value is allowed";
    return false;
  }
  return true; // allow submit
}

Hier ist der HTML

<form onsubmit="return validate(this)">
    <input type="text" name="quantity" value="" />
    <input type="submit" />
</form>    
<span id="errorMsg"></span>
mplungjan
quelle
1

Auf diese Weise setzen Sie den Fokus und den Cursor auf das Ende Ihrer Eingabe:

div.getElementsByTagName("input")[0].focus();
div.getElementsByTagName("input")[0].setSelectionRange(div.getElementsByTagName("input")[0].value.length,div.getElementsByTagName("input")[0].value.length,"forward");
BeatEngine
quelle
0

Durch meine Erfahrung

document.getElementById (frmObj.id) .focus ();

ist gut in einem Browser, der auf einem PC läuft. Wenn Sie jedoch auf dem Handy möchten, dass die Tastatur angezeigt wird, damit der Benutzer sie direkt eingeben kann, benötigen Sie außerdem:

document.getElementById (frmObj.id) .select ();

Daniele Folatelli
quelle