Die beste Lösung für das Problem, dass die Suchfunktion von el-select auf dem mobilen Terminal / iPad die Softtastatur nicht zum Suchen öffnen kann

Zunächst habe ich dieses Problem für einen Tag gelöst, aber es stellte sich heraus, dass es sich um ein kleines Problem handelt. Verschwenden Sie hier nicht Ihre Zeit und geben Sie die Lösung direkt an: Entfernen Sie das schreibgeschützte Attribut des Dropdown-Felds . Wenn Sie verstehen, können Sie es natürlich verstehen. Sie können den spezifischen Plan am Ende sehen. Schauen Sie sich zuerst den Prozess an, der Ihnen helfen kann.

<el-select placeholder="请选择产品花型"
  filterable
  id="fuck"
  v-model="flower">
  <el-option v-for="(item,index) in flowerArr"
    :key="index"
    :label="item.name"
    :value="item.id">
  </el-option>
</el-select>

  Schauen Sie sich zuerst den obigen Code an, er sieht so aus, wenn er zu einer Komponente wird

Hier ist eine allgemeine Antwort darauf, wie Baidu die Softtastatur öffnet:

Wird die Softtastatur angezeigt, wenn die Eingabekomponente fokussiert ist? ? ?

fnndp!

Es ist nicht so einfach, was Sie gesagt haben, ist Unsinn, wenn der Anfänger gerade lernt. Ich suchte nach einem Tag und suchte nach Möglichkeiten, die Eingabe fokussiert zu machen. Obwohl ich dachte, dass die Eingabe von Anfang an fokussiert war, suchte ich immer noch einen Tag danach.

Um die Softtastatur aufzurufen, müssen neben der Eingabe viele Bedingungen fokussiert werden! ! ! ! ! ! !

Ich bin zu faul, um die spezifischen Bedingungen zu finden, aber ich habe festgestellt, dass es zwei Situationen gibt, in denen die Softtastatur bei der Eingabe nicht angezeigt wird

Der erste Typ: Eingabe ist ein Dropdown-Feld, aber das Dropdown-Feld von Element-UI wird von Ihnen selbst erstellt. Es ist ein Textfeld-Eingabefeld. Sie können den Screenshot dafür sehen.

Der zweite Typ: Eingabe hat ein schreibgeschütztes Attribut und die Softtastatur wird nicht angezeigt (persönliche Vermutung, Deaktivieren kann nicht angezeigt werden, testen Sie selbst).

 

Das Suchfeld von elment-ui gehört zu dieser Situation. Es ist standardmäßig schreibgeschützt. Ich weiß nicht, was der Autor denkt, aber jetzt muss ich es nur schreibgeschützt entfernen, um suchen zu können. Der Code lautet wie folgt :

document.getElementById('fuck').removeAttribute('readOnly')

 

Natürlich ist es nicht so einfach. Diese Komponente fügt beim Unschärfen schreibgeschützt hinzu, sodass Sie beim Unschärfen schreibgeschützt entfernen müssen. Wie geht es Ihnen? Es ist nicht mehr so ​​einfach. Nachdem ich den Quellcode der ausgewählten Komponente überprüft hatte, stellte ich fest, dass es beim Verwischen eine Verzögerung von 50 Millisekunden gibt. Die Benutzererfahrung ist optimiert. Daher muss Ihre Entfernungsoperation eine asynchrone Operation sein, um schreibgeschützt zu eliminieren. Der Quellcode lautet wie folgt:

Die endgültige Lösung lautet wie folgt: Schreiben Sie diesen Code einfach in den öffentlichen Ordner

Array.from(document.getElementsByClassName('el-select')).forEach((item) => {
      item.children[0].children[0].removeAttribute('readOnly')
      item.children[0].children[0].onblur = function () {
        let _this = this
        setTimeout(() => {
          _this.removeAttribute('readOnly')
        }, 200)
      }
    })

——————————————————————————————

 

Schauen wir uns zum Schluss an, wie elment-ui dies schreibgeschützt handhabt. Der Quellcode lautet wie folgt

 Ich habe eine E-Mail an das offizielle Personal gesendet, um nach der Bedeutung dieses Problems zu fragen und auf die Antwort zu warten. . .

Ich denke du magst

Origin blog.csdn.net/dkr380205984/article/details/105143340
Empfohlen
Rangfolge