解決IOS中input失焦后，頁面上移，點(diǎn)擊不了問題

nevermind 發(fā)布于2019-08-23 14:58 / 2630人閱讀

摘要：在失焦后，發(fā)現(xiàn)的頁面會停止不下來，并且頁面上的輸入框，按鈕點(diǎn)擊事件，全部都移位了，需要滑動一下才可以正常。

IOS在Input失焦后，發(fā)現(xiàn)body的頁面會停止不下來，并且頁面上的輸入框，按鈕點(diǎn)擊事件，全部都移位了，需要滑動一下才可以正常。

下面是解決方法，可全局引用：

var u = navigator.userAgent;
  var flag;
  var myFunction;
  var isIOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/);
  if (isIOS) {
    document.body.addEventListener("focusin", () => {  //軟鍵盤彈起事件
      flag = true;
      clearTimeout(myFunction);
    })
    document.body.addEventListener("focusout", () => { //軟鍵盤關(guān)閉事件
      flag = false;
      if (!flag) {
        myFunction = setTimeout(function () {
          window.scrollTo({ top: 0, left: 0, behavior: "smooth" })//重點(diǎn)  =======當(dāng)鍵盤收起的時候讓頁面回到原始位置(這里的top可以根據(jù)你們個人的需求改變，并不一定要回到頁面頂部)

        }, 200);
      } else {
        return
      }
    })
  } else {
    return
  }

云服務(wù)器 GPU云服務(wù)器失焦后框失焦后 html中input python中input的用法

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/101440.html

相關(guān)文章

ios12中遇到的帶input彈窗的錯位問題

摘要：問題描述使用定位的彈窗，在的系統(tǒng)里，軟鍵盤調(diào)起后，頁面整體上移，當(dāng)軟鍵盤消失時，視覺上頁面已經(jīng)回到原始位置，但其實(shí)彈窗的焦點(diǎn)位置仍在軟鍵盤調(diào)起時的位置。問題描述：使用fixed定位的彈窗，在ios12的系統(tǒng)里，軟鍵盤調(diào)起后，頁面整體上移，當(dāng)軟鍵盤消失時，視覺上頁面已經(jīng)回到原始位置，但其實(shí)彈窗的焦點(diǎn)位置仍在軟鍵盤調(diào)起時的位置。解決辦法：這也是參考某位大佬的解決辦法 documen...

henry14 2019-08-26 13:49 評論0 收藏0
vue移動端項(xiàng)目中使用fastclick及遇上的issue

摘要：在項(xiàng)目中安裝插件在中引入并綁定到在項(xiàng)目中安裝成功后測試會遇到以下問題點(diǎn)擊不靈敏解決方法項(xiàng)目中使用時點(diǎn)擊不靈敏兼容處理在中，有一些元素如等在會出現(xiàn)這是因?yàn)檫@些元素并沒有和的整型數(shù)字屬性，所以一旦引用就會報(bào)錯，因此排除這些屬性才使用方法修復(fù) 1、在vue項(xiàng)目中安裝fastclick插件 npm install --save fastclick 2、在main.js中引入并綁定到body i...

cod7ce 2019-08-26 10:39 評論0 收藏0
在iOS設(shè)備下，h5的input框失焦后頁面被頂起來一部分bug解決

摘要：在之后，的框失焦后頁面會出現(xiàn)被頂上去一部分的下面就來看下怎么解決這個，首先我們必須知道這兩個方法軟鍵盤彈起事件軟鍵盤關(guān)閉事件。在iOS12之后，h5的input框失焦后頁面會出現(xiàn)被頂上去一部分的bug,下面就來看下怎么解決這個bug，首先我們必須知道這兩個方法focusin(軟鍵盤彈起事件)、focusout(軟鍵盤關(guān)閉事件)。注意：這里的input框的位置是在頁面的底部廢話不多說...

xiguadada 2019-08-23 14:51 評論0 收藏0
React中使用UEditor

摘要：前言本文將介紹筆者在的項(xiàng)目中使用百度的富文本編輯器的過程。以百度官網(wǎng)的為例，控制臺輸入為該編輯器注冊點(diǎn)擊事件，當(dāng)點(diǎn)擊加粗按鈕時，控制臺輸出為了避免點(diǎn)擊工具條時觸發(fā)事件，筆者將自定義的事件全部注釋了。前言本文將介紹筆者在React的項(xiàng)目中使用百度的富文本編輯器Ueditor的過程。注意本文不提供一條龍式的使用方法，只是將使用過程中的一些實(shí)現(xiàn)思路進(jìn)行總結(jié)，供以參考。react項(xiàng)目中導(dǎo)入...

firim 2019-08-26 12:17 評論0 收藏0