Implementation method of repeatedly popping up the keyboard after clicking input on the H5 mobile page

This article mainly shares with you the H5 mobile page by adding canvas sliding code. When the android phone clicks input to repeatedly pop up the keyboard, the canvas animation is used on the mobile page. In order to realize the touch sliding of the animation, createjs.Touch.enable will be added. (stage, true, false) statement, but after adding this statement, clickable events such as input and click on the page will be invalid, so touch events will be used to implement related functions, as follows:

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

touch The event controls the acquisition of focus to make the input keyboard pop up:

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

However, after the Apple phone keyboard is closed, the input focus is automatically lost. Clicking the keyboard again pops up without exception, and the Android phone Even if the keyboard is closed input still gets the focus, so the keyboard cannot pop up repeatedly. I originally wanted to add a focus-losing behavior to the event of closing the keyboard, but I couldn't find this event after checking the information, so I found another way: every time I click input, the original one will be deleted. input and generate a new input and place it here, so that the new input can gain focus and pop up the keyboard. The implementation code is as follows:

htmlCode:

<button></button>
<p>
    <input>
</p>

jsCode:

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

Related recommendations:

Analysis How to hide and display the soft keyboard and not automatically pop up the keyboard in android

The above is the detailed content of Implementation method of repeatedly popping up the keyboard after clicking input on the H5 mobile page. For more information, please follow other related articles on the PHP Chinese website!