Textbox füllen HTML?

Ich programmiere gerade ein Kassensystem im Web.

Hierfür habe ich einige Buttons erstellt und JavaScript-Funktionen, mit denen man Zahlen in ein Textfeld einfügen kann. Nun möchte ich nicht nur auf die Zahlen tippen müssen, sondern auch die Tastatur nutzen können.

Klar könnte ich jetzt das Feld anklicken und dann etwas eingeben, jedoch möchte ich das Feld nicht extra anklicken müssen. Das heißt ich möchte Eingaben auf der Tastatur machen, ohne vorher das Feld aktivieren zu müssen. Geht das?

Zudem wäre die Frage, ob es dann auch geht einen Button mit dem Enterknopf zu betätigen?

Answer 1

[regex9]

Das heißt ich möchte Eingaben auf der Tastatur machen, ohne vorher das Feld aktivieren zu müssen.

Ja, indem du ein Feld vorselektierst, sobald die Seite geladen wurde.

var input = document.getElementById("yourInputField");
input.focus();

Optional lässt sich noch der Text selektieren:

input.select();

Mit der Tabulatortaste könnte der Nutzer dann zwischen weiteren Feldern hin- und herspringen, mit dem tabindex-Attribut kannst du die Reihenfolge festlegen.

Zudem wäre die Frage, ob es dann auch geht einen Button mit dem Enterknopf zu betätigen?

Einige Browser unterstützen das bereits (oder haben es einmal unterstützt). Gib dem Dokument am besten einen EventListener, welcher auf Key-Events hört. Wenn die Entertaste gedrückt wurde, kann das Klickevent auf dem Button manuell ausgelöst werden.

document.addEventListener("keypress", function (e) {
  if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
    document.getElementById("yourButton").click();
    return false;
  }

  return true;
});              

Comments

[maxik5899]

Muss ich bei dem Button auch noch etwas hinzufügen? Das klappt bei mir noch nicht ganz

[regex9]

@maxik5899

Die passende ID, so wie es im Code-Schnipsel steht. Wenn es danach noch nicht funktioniert, ist das Browserdokument nicht fokusiert.

[maxik5899]

Klappt jetzt!

Answer 2

[Scriptim]

Mit

<input ... autofocus>

wird dieser Input automatisch fokusiert, sodass du direkt etwas eingeben kannst.

Mit der Tab-Taste kann der Nutzer nacheinander die verschiedenen Inputs fokusieren, ohne die Maus benutzen zu müssen.

Mit

<input ... tabindex="1">
<input ... tabindex="3">
<input ... tabindex="2">

kannst du regeln, in welcher Reihenfolge das geschieht.

Wenn sich diese Inputs in einem Formular befinden, wird beim Drücken von Enter der Submit-Button betätigt. Ansonsten kannst du das KeyEvent abfangen:

document.addEventListener('keypress', e => {
  if (e.keyCode === 13 || e.which === 13) {
    // hier dein Code, z. B.
    document.getElementById('button').click()
  }
})