Implementierung eines Element-Eingabefelds, das automatisch den Fokus erhält

Beim Erstellen eines Formulars in einem aktuellen Projekt muss ich automatisch zum Kommentarfeld scrollen und das Kommentarfeld automatisch fokussieren, wozu ich den Fokuszustand des Eingabefelds manuell auslösen muss.

Das Element unterstützt jedoch nicht das Autofokus-Attribut, sodass Sie den Fokuseffekt nur über native JS-Effekte erzielen können.

document.getElementById("Eingabe").Fokus();

Oder Sie können das Ref-Attribut von Vue verwenden, um den Fokussierungseffekt zu erzielen:

Das Prinzip ist eigentlich ganz einfach. Element stellt bereits eine Fokusmethode bereit, aber die Dokumentation gibt nicht an, wie diese aufgerufen wird. Im Folgenden fügen Sie dem el-input-Tag ein ref-Attribut hinzu und rufen die Methode dann bei Bedarf direkt auf.

<el-input v-model="input" placeholder="Bitte Inhalt eingeben" ref="input"></el-input>

dies.$nextTick(() => {
      dies.$refs.input.focus()
    })

Hinweis: Eine Seite kann nur einen Fokuseffekt haben

Zuletzt unterstützt vue auch benutzerdefinierte Anweisungen

Wenn die Seite geladen wird, erhält das Element den Fokus (Hinweis: Der Autofokus funktioniert nicht im mobilen Safari). Tatsächlich sollte das Eingabefeld immer noch im Fokus sein, solange Sie seit dem Öffnen der Seite nichts angeklickt haben. Lassen Sie uns diese Funktionalität nun mithilfe der Anweisungen implementieren:

// Registriere eine globale benutzerdefinierte Direktive `v-focus`
Vue.direktive('Fokus', {
  // Wenn das gebundene Element in das DOM eingefügt wird ...
  eingefügt: Funktion (el) {
    // Fokuselement el.focus()
    //Element-Benutzeroberfläche
    el.Kinder[0].Fokus()
    // Wenn sich das Element ändert, z. B. die Anzeige oder das übergeordnete Element, können Sie eine Verzögerung hinzufügen oder festlegen, dass setTimeout (_ => {
      el.Kinder[0].Fokus()
    })
  }
})

Referenz: benutzerdefinierte Vue-Direktive https://cn.vuejs.org/v2/guide/custom-directive.html

Dies ist das Ende dieses Artikels darüber, wie Sie automatisch den Fokus des Element-Eingabefelds erhalten. Weitere Informationen dazu, wie Sie automatisch den Fokus des Element-Eingabefelds erhalten, finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!