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()
})

그러나 Apple 휴대폰 키보드가 닫힌 후 입력 키보드를 다시 클릭하면 예외 없이 자동으로 팝업이 뜨고, 안드로이드 휴대폰 키보드는 입력을 닫으면 여전히 포커스를 갖기 때문에 키보드가 반복적으로 팝업될 수 없습니다. 원래는 키보드를 닫는 이벤트에 포커스를 잃는 동작을 추가하고 싶었으나 정보를 확인해보니 이 이벤트를 찾을 수 없어서 다른 방법을 찾았습니다. 입력을 클릭할 때마다 삭제됩니다. 원래 입력이 생성되고 새 입력이 여기에 배치되므로 새 입력이 포커스를 얻고 팝업을 표시할 수 있습니다. 키보드 구현 코드는 다음과 같습니다.

html 코드:

rrreee

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

숨기기 구현 분석 소프트 키보드를 표시하고 Android Method🎜🎜🎜🎜🎜에서 키보드가 자동으로 팝업되지 않습니다.

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