javascript-在iOS8中使用.focus()會在觸摸后顯示虛擬鍵盤并滾動頁面

在iOS8之前,在輸入元素上使用Javascript .focus()方法似乎無效(虛擬鍵盤將不會顯示)。 在最新的iOS 8版本之后,運行navigator.userAgent方法似乎對頁面加載沒有影響,但是一旦用戶觸摸屏幕上的任意位置,虛擬鍵盤就會立即出現并將頁面滾動到焦點所在的元素。 (當我使用HTML屬性“自動對焦”時,這也是一個問題)

此更改導致我的網站上的iOS8用戶出現問題。 當用戶嘗試單擊我頁面上的按鈕時,突然的滾動和鍵盤外觀使他們無意中單擊了屏幕下方的按鈕。

我假設這是iOS8中的錯誤,而不是有意的功能,我的問題是解決此問題的最有效解決方案是什么?

每次我使用.focus()方法時,是否必須檢查navigator.userAgent以查看設備是否為iOS8?

asked 2020-02-22T21:09:39Z
7個解決方案
30 votes

看來您肯定是在遇到iOS 8錯誤。 在iOS7中,Safari會(顯然)忽略或保留在頁面加載之前已設置焦點的未聚焦元素。 其中包括input.focus()input.focus()可以领救济金的游戏,它們都發生在某個點上,甚至可能是頁面加載(我僅使用內聯腳本進行了測試)。

在iOS 8中,Safari現在顯然記得該元素已被聚焦,但直到觸地事件才真正聚焦。 然后,它盲目地將click事件發送到接收到修飾的任何元素。

對于頁面加載后發生的input.focus(),兩種瀏覽器的行為相同。 它們都縮放到元素并調出鍵盤。

測試:

  • input.focus()在頁面加載之前:[http://fiddle.jshell.net/qo6ctnLz/3/show/]
  • input.focus(): [HTTP://fiddle.假設理論.net/去哦6出頭鳥LZ/4/show/]
  • input.focus()頁面加載后:[http://fiddle.jshell.net/qo6ctnLz/6/show/]

好消息是,您只需要擔心要預聚焦的元素上的新行為。 另一個好消息是可以领救济金的游戏,盡管您將不得不使用用戶代理解決方法,但是您可以將其用于所有iOS版本,因為它們已經表現出沒有自動對焦的效果:

if (!/iPad|iPhone|iPod/g.test(navigator.userAgent)) {
    element.focus();
}

這似乎是[http://www.google.com]基于一些基本的用戶代理測試所使用的方法:

  • Mac Book Pro:頁面加載前自動對焦。
  • iPhone:無自動對焦
  • iPad:無自動對焦
  • Kit Kat(Android):頁面加載后將焦點對準,可能會對軟件鍵盤的存在進行額外的檢測。

如果還沒有,則應繼續進行操作,并通過[https://bugreport.apple.com.cn]向Apple提交雷達報告。

answered 2020-02-22T21:10:52Z
21 votes

如果您正在開發Cordova項目可以领救济金的游戏,則可以在添加此行后對其進行修復

<preference name="KeyboardDisplayRequiresUserAction" value="false" />

到您的config.xml文件。 在IOS 8.3和IOS 8.4中測試

answered 2020-02-22T21:11:17Z
4 votes

在iOS 8中,似乎對javascript focus()命令的默認處理方式進行了API更改。 如果您的應用程序是混合應用程序,并且您可以直接控制Apple的Web視圖外觀,則以下內容直接來自apples文檔。

一個布爾值,指示網站內容是否可以通過編程方式   顯示鍵盤。

[myWebView setKeyboardDisplayRequiresUserAction:YES];

當此屬性設置為YES時,用戶必須明確點擊   Web視圖中顯示鍵盤(或其他相關元素)的元素   輸入視圖)。 設置為“否”時,   元素使輸入視圖得以顯示并與其關聯   元素自動。

此屬性的默認值為YES。

從最后一段看來,此方法調用并非嚴格針對鍵盤。 它指示它用于全面輸入視圖,即下拉菜單和日期選擇器等。

似乎有一個錯誤,因為此方法調用當前不適用于我。 我收到的當前行為與默認情況下的默認值相同。

answered 2020-02-22T21:12:05Z
1 votes

我有一個解決方案:

  1. 禁用所有輸入
  2. 啟用您要關注的輸入
  3. 將焦點設置為該輸入
  4. 重新啟用所有其他輸入
answered 2020-02-22T21:12:42Z
1 votes

這是針對arguments[0]的有條件的猴子補丁,因此您無需在任何地方添加userAgent測試。

的JavaScript

if (/iPad|iPhone|iPod/g.test(navigator.userAgent)) {
  (function($) {
    return $.fn.focus = function() {
      return arguments[0];
    };
  })(jQuery);
}

CoffeeScript

if /iPad|iPhone|iPod/g.test navigator.userAgent
  (($) ->
    $.fn.focus = ->
      arguments[0]
  )(jQuery)

注意:我要返回arguments[0],所以我們不會破壞方法鏈接,例如$(el).focus().doSomethingElse()

answered 2020-02-22T21:13:15Z
0 votes

我已將有關此問題的錯誤記錄到Apple Bug Reporter中,并以重復的形式將其關閉,這表明他們正在努力解決此問題。 不幸的是,他們沒有給我更多有關重復項或問題本身的信息。 我只能看到重復的項目狀態,即“打開”。

answered 2020-02-22T21:13:35Z
0 votes

對于2018年參加此活動的任何人,都有一個可修復此問題的插件。 只需安裝此[https://github.com/onderceylan/cordova-plugin-wkwebview-inputfocusfix],則2759320708810540040032將自動工作,無需進行任何其他工作。

answered 2020-02-22T21:13:56Z
translate from