H5 모바일 페이지에서 입력 클릭 후 키보드가 반복적으로 팝업되는 구현 방법

이 글에서는 H5 모바일 페이지에 캔버스 슬라이딩 코드를 추가하는 방법을 주로 설명합니다. 안드로이드 폰에서 입력을 클릭하면 모바일 페이지에서 키보드가 반복적으로 팝업됩니다. 애니메이션에는 createjs.Touch.enable(stage) , true, false) 이 문이 추가되지만 이 문을 추가한 후에는 페이지에서 입력 및 클릭과 같은 클릭 가능한 이벤트가 무효화되므로 터치 이벤트를 사용하게 됩니다. 다음과 같이 관련 기능을 구현합니다.

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

터치 이벤트가 포커스 획득을 제어합니다. 입력 키보드 팝업을 만듭니다. input键盘弹出：

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

然而苹果手机键盘关闭后input焦点自动失去，再次点击键盘弹出无异常，安卓手机键盘关闭input还是获取焦点状态，故键盘无法重复弹出。本想在关闭键盘的事件上加个失去焦点的行为，但查过资料无法找到这个事件，所以另辟奇径，找到了另一种办法：每次点击input都会删除原来的input并且生成新的input放在这里，这样新的input又可以获取焦点并弹出键盘了，实现代码如下：

html代码：

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

js

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

html 코드:

js 코드: rrreee관련 권장 사항:

위 내용은 H5 모바일 페이지에서 입력 클릭 후 키보드가 반복적으로 팝업되는 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!