如何在Javascript/Sencha中偵聽鍵盤打開/關閉？

我有一個HTML5/Javascript（Sencha）應用程序，我在XCode中已將它打包到iOS的PhoneGap中。無論如何，我希望能夠聽到鍵盤打開/關閉事件並做相應的事情。有沒有辦法做到這一點？如何在Javascript/Sencha中偵聽鍵盤打開/關閉？

來源

2011-11-23 Groppe

鍵盤將自動調用，而你正在關注textfield，textareafield ...。所以你可以創建監聽器在JavaScript中的焦點事件。 – heyjii

然後，我也想聽聽textfields等什麼時候失去焦點，是否有這樣的事件？ – Groppe

我認爲你可以使用模糊事件 – heyjii

在對焦textfield，textareafield ...時，鍵盤將被自動調用。因此，您可以在JavaScript中創建偵聽器，以便偵聽焦點事件，這與偵聽鍵盤打開事件類似。您也可以使用模糊監聽器來處理鍵盤關閉。

謝謝。

來源

2011-11-23 12:49:19 heyjii

我正在使用它來設置焦點。 inpMessage.fieldEl.dom.focus（）;它的工作很好，而不是在設備中。 –

請注意，在鍵盤動畫打開之前，它會觸發，所以如果您需要進行定位/佈局調整，可能爲時過早 –

您需要在發佈答案之前進行更多測試。當你點擊後面的Android設備鍵盤按鈕將被隱藏，但不會觸發模糊事件。 – filipvkovic

據我所見，這隻適用於PhoneGap的Android版本，請參閱此處的請求：https://github.com/phonegap/phonegap-android/issues/94。

這些事件被稱爲hidekeyboard和showkeyboard。你也可以檢查他們是否也在iOS上觸發。

來源

2011-11-23 11:45:06

我遇到了同樣的問題，我認爲你的情況最好的解決辦法是使用PhoneGap的插件將結合本地事件，像這樣的：

https://github.com/driftyco/ionic-plugins-keyboard/tree/60b803617af49a10aff831099db90340e5bb654c

它的工作原理偉大的Android和iOS以同樣的方式，只要綁定這些事件：

window.addEventListener('native.showkeyboard', keyboardShowHandler); 

window.addEventListener('native.hidekeyboard', keyboardHideHandler);

來源

2014-06-19 09:42:55 Nicolas

這是唯一的工作。謝謝。 – 2014-10-13 07:03:39

觸發打開狀態很容易使用的onclick或onfocus事件，但在關閉鍵盤onblur事件不會觸發（因爲光標停留在輸入/ textarea的）。所以我通過檢測窗口高度發現瞭解決方案，該窗口在鍵盤打開/關閉時顯着改變。

它也適用於Android和iOS的現代瀏覽器。演示：http://jsfiddle.net/qu1ssabq/3/

如果有必要，您可以改進我的代碼設備不支持addEventListener或innerHeight - 在互聯網上有可用的替代品。

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, minimal-ui"> 
<title>Detect keyboard opened/closed event</title> 
</head> 
<body> 

<textarea id="txta" onclick="xfocus()" onblur="xblur()"></textarea><br> 

<span id="status" style="background: yellow; width: auto;">closed</span> 

<script type="text/javascript"> 
    function xfocus() { 
    setTimeout(function() { 
     height_old = window.innerHeight; 
     window.addEventListener('resize', xresize); 
     document.getElementById('status').innerHTML = 'opened'; // do something instead this 
    }, 500); 
    } 
    function xresize() { 
    height_new = window.innerHeight; 
    var diff = Math.abs(height_old - height_new); 
    var perc = Math.round((diff/height_old) * 100); 
    if (perc > 50) 
     xblur(); 
    } 
    function xblur() { 
    window.removeEventListener('resize', xresize); 
    document.getElementById('status').innerHTML = 'closed'; // do something instead this 
    } 
</script> 

</body> 
</html>

來源

2014-12-17 15:04:01 mikep

如何在Javascript/Sencha中偵聽鍵盤打開/關閉？

回答

相關問題