Heim >Web-Frontend >H5-Tutorial >Implementierungsmethode zum wiederholten Einblenden der Tastatur nach dem Klicken auf die Eingabe auf der mobilen H5-Seite

Implementierungsmethode zum wiederholten Einblenden der Tastatur nach dem Klicken auf die Eingabe auf der mobilen H5-Seite

小云云
小云云Original
2018-02-02 13:48:582826Durchsuche

In diesem Artikel erfahren Sie hauptsächlich, wie Sie der mobilen H5-Seite Canvas-Code hinzufügen. Wenn das Android-Telefon auf die Eingabe klickt, wird die Canvas-Animation wiederholt angezeigt, um die Berührung zu realisieren Beim Verschieben der Animation wird die Anweisung „createjs.Touch.enable“ hinzugefügt (stage, true, false), aber nach dem Hinzufügen dieser Anweisung sind anklickbare Ereignisse wie Eingabe und Klicken auf der Seite ungültig, sodass Touch-Ereignisse verwendet werden Implementieren Sie verwandte Funktionen wie folgt:

$('#button').on('touchstart', function() {
    window.location.href = 'xx.html'
})

Berührungsereignisse steuern die Erfassung des Fokus, damit die input Tastatur eingeblendet wird:

$('#input').on('touchstart', function() {
    $(this).focus()
})

Jedoch nach der Tastatur des Apple-Telefons Beim Schließen geht der input-Fokus automatisch verloren. Wenn Sie erneut auf die Tastatur klicken, wird ausnahmslos die Tastatur des Android-Telefons angezeigt.inputDer Fokusstatus bleibt erhalten, sodass die Tastatur nicht wiederholt angezeigt werden kann. Ursprünglich wollte ich dem Ereignis beim Schließen der Tastatur ein Fokusverlustverhalten hinzufügen, konnte dieses Ereignis jedoch nach Überprüfung der Informationen nicht finden, also habe ich einen anderen Weg gefunden: Jedes Mal, wenn ich auf input klicke, wird das ursprüngliche wird gelöscht. Und generieren Sie ein neues input und platzieren Sie es hier, damit das neue input den Fokus gewinnen und auf der Tastatur erscheinen kann. Der Implementierungscode lautet wie folgt: input

Code : html

<button id="btn"></button>
<p class="box">
    <input type="text" maxlength="4" id="hengpi"/>
</p>

Code: js

$('#btn').on('touchstart', function() {
    var value = $('input').val()
    $('input').remove()
    $('.box').html('<input type="text"/>')
    if(value!=''){
        $('input').val(value)
    }
    $('input').focus()
})
Verwandte Empfehlungen:


Analyse zum Ein- und Ausblenden der Softtastatur und Die Tastatur wird in Android nicht automatisch angezeigt


Das obige ist der detaillierte Inhalt vonImplementierungsmethode zum wiederholten Einblenden der Tastatur nach dem Klicken auf die Eingabe auf der mobilen H5-Seite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn