資訊專欄INFORMATION COLUMN
摘要：在做表單時，在瀏覽器中測試正常，在移動端測試出現(xiàn)問題。輕擊無法喚起軟鍵盤，無法對輸入框聚焦，必須長按或重壓才可以。經(jīng)過測試，發(fā)現(xiàn)是由于引入移除移動端點擊延遲引起的沖突，由于之后修復了移動點擊延遲。
**在做表單時，在pc瀏覽器中測試正常，在ios移動端測試出現(xiàn)問題。輕擊input無法喚起軟鍵盤，無法對輸入框聚焦，必須長按或重壓才可以。
經(jīng)過測試，發(fā)現(xiàn)是由于引入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系統(tǒng)
// 引入fastclick 做相關處理
FastClick.attach(document.body)
} else {
if (parseInt(ver[1])< 11) {
// 引入fastclick 做相關處理
FastClick.attach(document.body)
}
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/106749.html
摘要：然而，并沒有直接監(jiān)聽軟鍵盤的原生事件，只能通過軟鍵盤彈起或收起，引發(fā)頁面其他方面的表現(xiàn)間接監(jiān)聽，曲線救國。軟鍵盤收起表現(xiàn)觸發(fā)輸入框以外的區(qū)域時，輸入框失去焦點，軟鍵盤收起?？梢宰屲涙I盤彈起后，讓焦點元素再次滾到可視區(qū)，強迫滾到位。 前言 最近一段時間在做 H5 聊天項目，踩過其中一大坑：輸入框獲取焦點，軟鍵盤彈起，要求輸入框吸附（或頂）在輸入法框上。需求很明確，看似很簡單，其實不然。從...
摘要：參考地址首先，是這樣的布局父容器里面放一個輸入框和一個按鈕思路是父容器定位，為，為布局在其他事件觸發(fā)輸入框出現(xiàn)的時候例如一個評論的，父容器值變?yōu)?，被軟鍵盤頂上來。 參考地址： https://segmentfault.com/a/11...https://blog.csdn.net/github_... 1.首先，是這樣的布局：父容器里面放一個輸入框 和一個按鈕 思路是：父容器fi...
摘要：任務四一個最常見的移動端頁面完成的事情完成簡單布局，然后填充界面與效果圖對比優(yōu)化完成驗收要求擴展性頂欄固定進行樣式兼容性研究完成任務四深度思考跟隨深度思考師兄建議進行修改輸入欄左側(cè)換用輸入限制電話位，密碼位根據(jù)結(jié)構(gòu)的語義化修改嘗試下再加一 任務四、 一個最常見的移動端頁面 完成的事情 完成簡單布局，然后填充界面 與效果圖對比優(yōu)化 完成驗收要求：header擴展性 & 頂欄固定 進行p...
input 光標位置亂竄 固定式浮層內(nèi)的輸入框光標會發(fā)生偏移。即?fixed?定位的容器中輸入框光標的位置顯示不正確，沒有正常地顯示在輸入框中，而是偏移到了輸入框外面 showImg(https://segmentfault.com/img/bVbiJCo?w=750&h=1334); 可觸發(fā)條件 頁面body出現(xiàn)滾動條 點擊頁面出現(xiàn)用fixed定位的彈框，彈框內(nèi)有輸入框，鍵盤彈起，頁面發(fā)生滾...
閱讀 3758·2021-11-23 09:51
閱讀 2063·2021-11-16 11:42
閱讀 3372·2021-11-08 13:20
閱讀 1166·2019-08-30 15:55
閱讀 2265·2019-08-30 10:59
閱讀 1313·2019-08-29 14:04
閱讀 1121·2019-08-29 12:41
閱讀 2242·2019-08-26 12:22
