表單在ios下輸入框必須重壓或長按才能喚起軟鍵盤

tainzhi 發布于2019-08-26 10:46 / 2548人閱讀

摘要：在做表單時，在瀏覽器中測試正常，在移動端測試出現問題。輕擊無法喚起軟鍵盤，無法對輸入框聚焦，必須長按或重壓才可以。經過測試，發現是由于引入移除移動端點擊延遲引起的沖突，由于之后修復了移動點擊延遲。

**在做表單時，在pc瀏覽器中測試正常，在ios移動端測試出現問題。輕擊input無法喚起軟鍵盤，無法對輸入框聚焦，必須長按或重壓才可以。
經過測試，發現是由于引入fastclick.js（移除移動端點擊延遲）引起的沖突，由于ios11 之后修復了移動點擊300ms延遲。**

解決方案：

一、在node_module里找到fastClick文件，然后找到focus方法，加一句focus方法即可解決：

FastClick.prototype.focus = function(targetElement) {
    var length;
    if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf("date") !== 0 && targetElement.type !== "time" && targetElement.type !== "month") {
        length = targetElement.value.length;
        targetElement.setSelectionRange(length, length);
        // 修復bug iOS 11.3以上不彈出鍵盤，加上聚焦代碼，讓其強聚焦彈窗鍵盤
        targetElement.focus();
    } else {
        targetElement.focus();
    }
};

二、在main.js下加入以下代碼：

const str= navigator.userAgent.toLowerCase()
const ver=str.match(/cpu iphone os (.*?) like mac os/)
 
if (!ver) { // 非IOS系統
  // 引入fastclick 做相關處理
  FastClick.attach(document.body)
} else {
  if (parseInt(ver[1])< 11) {
    // 引入fastclick 做相關處理
    FastClick.attach(document.body)
  }
}

云服務器 GPU云服務器輸入界面軟鍵盤鍵盤遮擋輸入框 html輸入框鍵盤表單輸入框

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106749.html

可能這些是你想要的H5軟鍵盤兼容方案

摘要：然而，并沒有直接監聽軟鍵盤的原生事件，只能通過軟鍵盤彈起或收起，引發頁面其他方面的表現間接監聽，曲線救國。軟鍵盤收起表現觸發輸入框以外的區域時，輸入框失去焦點，軟鍵盤收起。可以讓軟鍵盤彈起后，讓焦點元素再次滾到可視區，強迫滾到位。前言最近一段時間在做 H5 聊天項目，踩過其中一大坑：輸入框獲取焦點，軟鍵盤彈起，要求輸入框吸附（或頂）在輸入法框上。需求很明確，看似很簡單，其實不然。從...

stackvoid 2019-08-23 17:05 評論0 收藏0
ios輸入框的坑(軟鍵盤彈出不靈敏、輸入法影響彈出高度)

摘要：參考地址首先，是這樣的布局父容器里面放一個輸入框和一個按鈕思路是父容器定位，為，為布局在其他事件觸發輸入框出現的時候例如一個評論的，父容器值變為，被軟鍵盤頂上來。參考地址： https://segmentfault.com/a/11...https://blog.csdn.net/github_... 1.首先，是這樣的布局：父容器里面放一個輸入框和一個按鈕思路是：父容器fi...

vvpvvp 2019-08-26 10:56 評論0 收藏0
【CSS練習】IT修真院--練習4-移動端界面

摘要：任務四一個最常見的移動端頁面完成的事情完成簡單布局，然后填充界面與效果圖對比優化完成驗收要求擴展性頂欄固定進行樣式兼容性研究完成任務四深度思考跟隨深度思考師兄建議進行修改輸入欄左側換用輸入限制電話位，密碼位根據結構的語義化修改嘗試下再加一任務四、一個最常見的移動端頁面完成的事情完成簡單布局，然后填充界面與效果圖對比優化完成驗收要求：header擴展性 & 頂欄固定進行p...

kun_jian 2019-08-29 15:39 評論0 收藏0
iOS下的 Fixed BUG

input 光標位置亂竄固定式浮層內的輸入框光標會發生偏移。即?fixed?定位的容器中輸入框光標的位置顯示不正確，沒有正常地顯示在輸入框中，而是偏移到了輸入框外面 showImg(https://segmentfault.com/img/bVbiJCo?w=750&h=1334); 可觸發條件頁面body出現滾動條點擊頁面出現用fixed定位的彈框，彈框內有輸入框，鍵盤彈起，頁面發生滾...

Aklman 2019-08-29 17:04 評論0 收藏0