如何隱藏Phonegap應用中的jQueryMobile頁面中的鍵盤？

我在iPhone模擬器中隱藏鍵盤時出現問題。我的HTML代碼：如何隱藏Phonegap應用中的jQueryMobile頁面中的鍵盤？

<form id="my_form"> 
    <input type="search" id="searchBar" /> 
</form>

jQuery代碼：

$("#my_form").submit(function() { 
    one = $('#searchBar').val(); 
    console.log(one); 
    doSearch(one); 
    return false; 
});

一切工作，因爲我需要：我可以得到價值形式，並執行一些Ajax。但是當函數返回false時，iPhone模擬器中的虛擬鍵盤仍然可見。如何隱藏鍵盤？還有另一種方法可以做到嗎？當用戶搜索並按下iPhone上的「Go」時，我需要使用Ajax將數據傳遞到服務器。搜索結果應顯示在同一頁面（已完成）。用戶可以再次搜索同一頁面。

請幫幫我。

感謝，

--regeint

來源

2012-01-08 regeint

謝謝Hosh Sadiq和techfoobar對我的幫助。其實我做了以下工作。它沒有影響該元素上方或下方的CSS。

$('.clr').after('<input type="checkbox" id="focusable" style="height:0; margin-left:-200px; clear: both;" />'); 
$('#focusable').focus();

再次感謝。 :)

來源

2012-01-10 04:01:42 regeint

嘗試增加另一個聚焦元素（例如：一個<select>）到您的網頁（其高度設置爲0，使其不可見但可調焦），並且將焦點移到該元素返回false之前。

來源

2012-01-08 19:13:00 techfoobar

在jQuery中，如果你使用return false;，它將停止默認的瀏覽器行爲，在這種情況下，它既提交表單又關閉鍵盤。下面應該工作：

<form id="my_form"> 
    <input type="search" id="searchBar" /> 
    <div style="height:0;width:0;"> 
     <input id="focusable" type="checkbox" /> 
    </div> 
</form>

的jQuery：

$("#my_form").submit(function(){ 
    one = $('#searchBar').val(); 
    console.log(one); 
    doSearch(one); 
    $('#focusable').focus(); 
    return false; 
});

來源

2012-01-08 19:32:49

嗨Hosh，它不工作。鍵盤仍然可見:( – regeint 2012-01-09 06:17:37

嘗試做什麼techfoobar做了，但有一個複選框，而不是一個選擇，因爲他建議（一個選擇可能會彈出一個空列表）我已經更新我的答案，以反映這一點 – 2012-01-09 10:46:52

而不是將焦點切換到另一個元素，你可以簡單地模糊了你的投入是這樣的：

$('#searchBar').blur();

它會隱藏虛擬鍵盤。

來源

2012-07-16 13:33:57 vadimtrifonov

我愛簡單的答案 - 簡單而有效，謝謝！ – zeroasterisk 2013-04-16 22:32:39

我用regeint解決方案，但修改了一下它不工作，因爲我告訴PhoneGap的允許顯示鍵盤，而無需用戶交互Cordova.plist我設置KeyboardDisplayRequiresUserAction到NO

function hideTheKeyBoard() { 
    $($.mobile.pageContainer).after('<input type="checkbox" id="focusable" style="height:0;margin-left:-200px;" />'); 
    $('#focusable').focus();// maybe .blur() would work too. 
    $('#focusable').remove(); 
}

來源

2012-11-16 12:33:03

從here

這很好理解。第二行將取消所有輸入字段，並依賴於jQuery。我發現在單個焦點文本框上調用blur（）並不總是有效。這兩條線中的任何一條都應該獨立工作，但是它們都不能停止！

var hideKeyboard = function() { 
    document.activeElement.blur(); 
    $("input").blur(); 
};

來源

2013-05-29 12:42:27

如何隱藏Phonegap應用中的jQueryMobile頁面中的鍵盤？

回答

相關問題