Méthode de mise en œuvre consistant à afficher le clavier à plusieurs reprises après avoir cliqué sur la saisie sur la page mobile H5

Cet article vous explique principalement comment ajouter du code coulissant sur la page mobile H5 Lorsque le téléphone Android clique sur la saisie, l'animation Canvas apparaît à plusieurs reprises sur la page mobile afin de réaliser le toucher. glissement de l'animation, l'instruction createjs.Touch.enable sera ajoutée. (stage, true, false), mais après l'ajout de cette instruction, les événements cliquables tels que la saisie et le clic sur la page ne seront pas valides, donc les événements tactiles seront utilisés pour implémentez les fonctions associées, comme suit :

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

Les événements tactiles contrôlent l'acquisition du focus pour faire apparaître le clavier input :

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

Cependant, une fois le clavier du téléphone Apple activé fermé, le input focus est automatiquement perdu. Un nouveau clic sur le clavier apparaît sans exception et le clavier du téléphone Android est ferméinputL'état de focus est toujours obtenu, le clavier ne peut donc pas apparaître à plusieurs reprises. Je voulais à l'origine ajouter un comportement de perte de concentration à l'événement de fermeture du clavier, mais je n'ai pas trouvé cet événement après avoir vérifié les informations, j'ai donc trouvé un autre moyen : chaque fois que je clique sur input, l'original input sera supprimé. Et générez un nouveau input et placez-le ici, afin que le nouveau input puisse gagner le focus et apparaître sur le clavier. Le code d'implémentation est le suivant :

htmlCode. :

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

jsCode :

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

Recommandations associées :

Analyse de la façon de masquer et d'afficher le clavier logiciel et le clavier n'apparaît pas automatiquement sous Android

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!