當我輸入可見時，強制iPhone鍵盤顯示在Safari窗口上

從幾年前在StackOverflow中對此主題的許多評論來看，這可能根本不可能。但是，如果我失去了一些東西，這裏的情況：當我輸入可見時，強制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

發現，工程策略的組合。不知道爲什麼，但如果我在'touchstart'而不是'mousedown'中處理tap，併爲'focus'添加額外呼叫，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窗口上

回答

相關問題