入力を表示させたときにiPhoneのキーボードがSafariウィンドウ上に表示される

数年前のこのトピックに関する多くのコメントから判断すると、これは単純に不可能な場合があります。しかし、何かが欠けている場合は、ここに状況があります：入力を表示させたときにiPhoneのキーボードがSafariウィンドウ上に表示される

私はhtmlキャンバス要素を持っています。ユーザーがそれをタップすると、入力要素が表示されます。理想的には、入力がフォーカスを取得し、モバイルデバイスではネイティブキーボードがポップアップします。

Android搭載端末ではこれが起こります。ただし、SafariのiPhoneユーザーがキャンバスをタップすると、入力が表示されますが、フォーカスが得られず、ネイティブキーボードが表示されません。ユーザーは、ネイティブキーボードが表示されるように入力要素をタップする必要があります。

誰かが最後の余分なタップなしにiPhoneでキーボードを表示する方法はありますか？ここで

は、テストケースである：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
</head> 
<body> 
    <div id="box" style="width:100px;height:100px;position:relative;background-color:blue"></div> 
    <div id="holder"> 
     <form> 
      <input id="in"> 
     </form> 
    </div> 
</body> 
<script> 
$(function() { 
    $("#holder").hide(); 
    $("#box").mousedown(function() { 
     $("#holder").show({complete:function() {$("#in").focus();}}); 
    }); 
}); 
</script> 
</html>

出典

2017-02-10 Josh Britton

は作品の戦略の組み合わせを発見しました。理由は分かりませんが、「マウス」の代わりに「タッチスタート」でタップを処理し、「フォーカス」に追加のコールを追加すると、IOSデバイスがフォーカスとネイティブキーボードを与えます：

$("#box").on("touchstart", function(e) { 
    $("#holder").show({complete:function() {$("#in").focus();}}); 
    event.stopPropagation(); 
    event.preventDefault(); 
    $("#in").focus(); 
});

出典

2017-02-11 11:31:27

入力を表示させたときにiPhoneのキーボードがSafariウィンドウ上に表示される

答えて

関連する問題