Windows 10平板電腦瀏覽器：軟鍵盤非常多

Question

我有一個平板電腦的HTML應用程序。 有些頁面有<input>和<textarea>以及許多其他元素：鏈接，菜單，文本，......

• 如果我不按任何<input>或<textarea>一切正常
• 只要按下一個輸入元素，就會彈出軟鍵盤（如預期的那樣）。
• 輸入一些文本並隱藏鍵盤后， 每次點擊webapp上的任何地方時鍵盤都會彈出 （即使在不可聚焦的元素中）

這完全破壞了體驗，因為您不得不使用始終顯示鍵盤的Web應用程序。

我已經嘗試了許多不同的方法來操作輸入焦點而沒有任何成功，比如在焦點組件，容器，窗口上調用blur() ， focus()和相關方法......但似乎沒有什么，只是重新加載頁面將鍵盤狀態重置為再次隱藏，直到點擊可聚焦元素。

我的實驗：

• 檢查是否按下<INPUT> / <TEXTAREA>外部導致焦點被刪除： onblur()被調用， document.activeElement返回NULL。

• 還試圖在觸發onchange后手動blur()文檔中的所有內容： $("input,textarea").blur() 。

• 嘗試使用TABINDEX（hacky）手動將focus()賦予非交互元素：

   <div id="dummyfocus" tabindex="0"> $("#dummyfocus").focus() 

• 我檢查了虛擬元素實際上是獲得焦點， input/textarea無關緊要的，但即使在這種情況下，問題仍然存在。

在Android或IOS中，一切都按預期工作：如果沒有<input>或<textarea>聚焦，鍵盤將不會自動顯示。

有什么建議？ 我還沒有聽說過任何時髦的微軟專有css標簽？ :)

Answer 1

我有類似的問題，經過一些挖掘后發現該問題可以在Microsoft Edge瀏覽器上重現（在win10 uap中用作渲染引擎）。 當點擊任何地方活動元素成為body元素並且由於某種原因（可能是bug）鍵盤被激活，所以我在嵌套在body中的容器div上添加了tabindex = 0，因此當在任何可聚焦元素之外點擊該容器變為激活元素時並且不會觸發鍵盤彈出窗口。 為了檢查哪個元素被激活我使用了這個代碼

  document.body.addEventListener('click', function() {
    console.log(document.activeElement);
  });

希望這可以幫助。

Answer 2

如果您仍然感興趣，我設法通過添加以下內容來解決此問題。 添加了一個虛擬控件來獲取焦點，然后在單擊遠離文本區域時更改焦點。

 $("body").click(function () { $("#radioDummy").focus(); }); $("#MyTextArea").click(function (e) { e.stopPropagation(); }); 

Answer 3

似乎問題在於在Windows 10上使用鍵盤時的touchstart事件。當您隱藏鍵盤時（例如，按鍵盤上的關閉按鈕（x）），輸入字段仍然具有焦點。 當你按其他地方時，鍵盤會再次彈出。 但是，長按任意一次（長按）將從輸入中移除焦點，而不是再次顯示鍵盤。 這讓我想到，問題可以解決掛鈎touchstart事件，並阻止事件傳播，並從輸入中刪除焦點。

我在我的主AppComponent中創建了一個全局@HostListener ，用於偵聽touchstart事件。 單擊正文時，停止事件的傳播，並調用document.activeElement.blur() （松散焦點）。

@HostListener('document:touchstart', ['$event'])
globalTouchEvent(event) {
    if (event) event.stopPropagation();
    document.activeElement.blur();
}

我創建了一個Stackblitz ，您可以使用Windows 10平板電腦進行測試。