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