成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

tainzhi / 2563人閱讀

摘要：在做表單時(shí)，在瀏覽器中測(cè)試正常，在移動(dòng)端測(cè)試出現(xiàn)問題。輕擊無法喚起軟鍵盤，無法對(duì)輸入框聚焦，必須長(zhǎng)按或重壓才可以。經(jīng)過測(cè)試，發(fā)現(xiàn)是由于引入移除移動(dòng)端點(diǎn)擊延遲引起的沖突，由于之后修復(fù)了移動(dòng)點(diǎn)擊延遲。

**在做表單時(shí)，在pc瀏覽器中測(cè)試正常，在ios移動(dòng)端測(cè)試出現(xiàn)問題。輕擊input無法喚起軟鍵盤，無法對(duì)輸入框聚焦，必須長(zhǎng)按或重壓才可以。
經(jīng)過測(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以上不彈出鍵盤，加上聚焦代碼，讓其強(qiáng)聚焦彈窗鍵盤
        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://systransis.cn/yun/106749.html

相關(guān)文章

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

    摘要：然而，并沒有直接監(jiān)聽軟鍵盤的原生事件，只能通過軟鍵盤彈起或收起，引發(fā)頁(yè)面其他方面的表現(xiàn)間接監(jiān)聽，曲線救國(guó)。軟鍵盤收起表現(xiàn)觸發(fā)輸入框以外的區(qū)域時(shí)，輸入框失去焦點(diǎn)，軟鍵盤收起?？梢宰屲涙I盤彈起后，讓焦點(diǎn)元素再次滾到可視區(qū)，強(qiáng)迫滾到位。 前言 最近一段時(shí)間在做 H5 聊天項(xiàng)目，踩過其中一大坑：輸入框獲取焦點(diǎn)，軟鍵盤彈起，要求輸入框吸附（或頂）在輸入法框上。需求很明確，看似很簡(jiǎn)單，其實(shí)不然。從...

    stackvoid 評(píng)論0 收藏0

  • ios輸入框的坑(軟鍵盤彈出不靈敏、輸入法影響彈出高度)

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

    vvpvvp 評(píng)論0 收藏0

  • 【CSS練習(xí)】IT修真院--練習(xí)4-移動(dòng)端界面

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

    kun_jian 評(píng)論0 收藏0

  • iOS下的 Fixed BUG

    input 光標(biāo)位置亂竄 固定式浮層內(nèi)的輸入框光標(biāo)會(huì)發(fā)生偏移。即?fixed?定位的容器中輸入框光標(biāo)的位置顯示不正確，沒有正常地顯示在輸入框中，而是偏移到了輸入框外面 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)有輸入框，鍵盤彈起，頁(yè)面發(fā)生滾...

    Aklman 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<