日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
總結(jié)幾個(gè)移動(dòng)端H5軟鍵盤的大坑

1. 部分機(jī)型軟鍵盤彈起擋住原來的視圖

成都創(chuàng)新互聯(lián)公司專注于雅安企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,商城網(wǎng)站開發(fā)。雅安網(wǎng)站建設(shè)公司,為雅安等地區(qū)提供建站服務(wù)。全流程定制網(wǎng)站建設(shè)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

解決方法：可以通過監(jiān)聽移動(dòng)端軟鍵盤彈起。

Element.scrollIntoView() 方法讓當(dāng)前的元素滾動(dòng)到瀏覽器窗口的可視區(qū)域內(nèi)。參數(shù)如下：

  • true，表示元素的頂部與當(dāng)前區(qū)域的可見部分的頂部對(duì)齊
  • false，表示元素的底部與當(dāng)前區(qū)域的可見部分的尾部對(duì)齊

Element.scrollIntoViewIfNeeded()方法也是用來將不在瀏覽器窗口的可見區(qū)域內(nèi)的元素滾動(dòng)到瀏覽器窗口的可見區(qū)域。但如果該元素已經(jīng)在瀏覽器窗口的可見區(qū)域內(nèi)，則不會(huì)發(fā)生滾動(dòng)。此方法是標(biāo)準(zhǔn)的Element.scrollIntoView()方法的專有變體。

 
 
 
    
  
  
  
  1. window.addEventListener('resize', function() { 
    2. 
  
  
  
  2.   if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') { 
    3. 
  
  
  
  3.     window.setTimeout(function() { 
    4. 
  
  
  
  4.       if ('scrollIntoView' in document.activeElement) { 
    5. 
  
  
  
  5.         document.activeElement.scrollIntoView(false) 
    6. 
  
  
  
  6.       } else { 
    7. 
  
  
  
  7.         document.activeElement.scrollIntoViewIfNeeded(false) 
    8. 
  
  
  
  8.       } 
    9. 
  
  
  
  9.     }, 0) 
    10. 
  
  
  
  10.   } 
    11. 
  
  
  
  11. }) 
    12.

2. ios 鍵盤收起時(shí)頁面沒有回落，底部會(huì)留白

部分蘋果手機(jī)填寫表單的時(shí)候的，輸入內(nèi)容后關(guān)閉軟鍵盤，底部會(huì)留一塊空白。這種情況可以通過監(jiān)聽鍵盤回落時(shí)間滾動(dòng)到原來的位置。

 
 
 
    
  
  
  
  1. window.addEventListener('focusout', function() { 
    2. 
  
  
  
  2.   window.scrollTo(0, 0) 
    3. 
  
  
  
  3. }) 
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5. //input輸入框彈起軟鍵盤的解決方案。 
    6. 
  
  
  
  6. var bfscrolltop = document.body.scrollTop 
    7. 
  
  
  
  7. $('input') 
    8. 
  
  
  
  8.   .focus(function() { 
    9. 
  
  
  
  9.     documentdocument.body.scrollTop = document.body.scrollHeight 
    10. 
  
  
  
  10.     //console.log(document.body.scrollTop); 
    11. 
  
  
  
  11.   }) 
    12. 
  
  
  
  12.   .blur(function() { 
    13. 
  
  
  
  13.     document.body.scrollTop = bfscrolltop 
    14. 
  
  
  
  14.     //console.log(document.body.scrollTop); 
    15. 
  
  
  
  15.   }) 
    16.

3. onkeyUp 和 onKeydown 兼容性問題

部分 ios 機(jī)型 中 input 鍵盤事件 keyup、keydown、等支持不是很好, 用 input 監(jiān)聽鍵盤 keyup 事件，在安卓手機(jī)瀏覽器中沒有問題，但是在 ios 手機(jī)瀏覽器中用輸入法輸入之后，并未立刻相應(yīng) keyup 事件：

  • onkeypress 用戶按下并放開任何字母數(shù)字鍵時(shí)發(fā)生。系統(tǒng)按鈕(箭頭鍵和功能鍵)無法得到識(shí)別。
  • onkeyup 用戶放開任何先前按下的鍵盤鍵時(shí)發(fā)生。
  • onkeydown 用戶按下任何鍵盤鍵(包括系統(tǒng)按鈕，如箭頭鍵和功能鍵)時(shí)發(fā)生。

4. ios12 輸入框難以點(diǎn)擊獲取焦點(diǎn)，彈不出軟鍵盤

定位找到問題是 fastclick.js 對(duì) ios12 的兼容性，可在 fastclick.js 源碼或者 main.js 做以下修改：

 
 
 
    
  
  
  
  1. FastClick.prototype.focus = function(targetElement) { 
    2. 
  
  
  
  2.   var length 
    3. 
  
  
  
  3.   if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month') { 
    4. 
  
  
  
  4.     length = targetElement.value.length 
    5. 
  
  
  
  5.     targetElement.setSelectionRange(length, length) 
    6. 
  
  
  
  6.     targetElement.focus() 
    7. 
  
  
  
  7.   } else { 
    8. 
  
  
  
  8.     targetElement.focus() 
    9. 
  
  
  
  9.   } 
    10. 
  
  
  
  10. } 
    11.

5. fastclick 導(dǎo)致下拉框焦點(diǎn)沖突

移動(dòng)端使用 fastclick 之后，在 ios 環(huán)境下，有幾個(gè)連續(xù)的下拉框 第一個(gè) select 框突然填充了第二個(gè)下拉框的內(nèi)容。

根本原因是 Fastclick 導(dǎo)致 ios 下多個(gè) select ，點(diǎn)擊某一個(gè)，焦點(diǎn)不停變換的 bug。修改源碼，在 onTouchStart 事件內(nèi)判斷設(shè)備是否為 ios，再判斷當(dāng)前 nodeName 是否為 select，如果是 return false 去阻止 fastClick 執(zhí)行其他事件。

 
 
 
    
  
  
  
  1. //line 391行 
    2. 
  
  
  
  2. FastClick.prototype.onTouchStart = function(event) { 
    3. 
  
  
  
  3.   //在其方法中添加判斷 符合ios select的時(shí)候 不返回事件 
    4. 
  
  
  
  4.   if (deviceIsIOS && this.targetElement == 'select') this.targetElement = null 
    5. 
  
  
  
  5.   event.preventDefault() 
    6. 
  
  
  
  6. } 
    7. 
  
  
  
  7. //line521 或者講源碼中 有關(guān)touchEnd判斷非ios或者非select的事件注釋， 
    8. 
  
  
  
  8. if (!deviceIsIOS || targetTagName !== 'select') { 
    9. 
  
  
  
  9.   this.targetElement = null 
    10. 
  
  
  
  10.   event.preventDefault() 
    11. 
  
  
  
  11. } 
    12.

6. ios 下 fixed 失效的原因

軟鍵盤喚起后，頁面的 fixed 元素將失效，變成了 absolute，所以當(dāng)頁面超過一屏且滾動(dòng)時(shí)，失效的 fixed 元素就會(huì)跟隨滾動(dòng)了。不僅限于 type=text 的輸入框，凡是軟鍵盤(比如時(shí)間日期選擇、select 選擇等等)被喚起，都會(huì)遇到同樣地問題。

解決方法: 不讓頁面滾動(dòng)，而是讓主體部分自己滾動(dòng),主體部分高度設(shè)為 100%，overflow:scroll

 
 
 
    
  
  
  
  1.  
    2. 
  
  
  
  2.    
    3. 
  
  
  
  3.     
 
  •   
     
  •   
    •   
  •    
 
 
      
    
  
  
    1. .warper { 
      2. 
    
  
  
    2.   position: absolute; 
      3. 
    
  
  
    3.   width: 100%; 
      4. 
    
  
  
    4.   left: 0; 
      5. 
    
  
  
    5.   right: 0; 
      6. 
    
  
  
    6.   top: 0; 
      7. 
    
  
  
    7.   bottom: 0; 
      8. 
    
  
  
    8.   overflow-y: scroll; 
      9. 
    
  
  
    9.   -webkit-overflow-scrolling: touch; /* 解決ios滑動(dòng)不流暢問題 */ 
      10. 
    
  
  
    10. } 
      11. 
    
  
  
    11. .fix-bottom { 
      12. 
    
  
  
    12.   position: fixed; 
      13. 
    
  
  
    13.   bottom: 0; 
      14. 
    
  
  
    14.   width: 100%; 
      15. 
    
  
  
    15. } 
      16.

    7. ios 鍵盤換行變?yōu)樗阉?/strong>

    • input type="search"
    • input 外面套 form，必須要有 action，action="javascript:return true"
    • 表單提交阻止默認(rèn)提交事件
       
 
 
      
    
  
  
    1.  
      2. 
    
  
  
    2.    
      3. 
    
  
  
    3.  
      4.

    新聞名稱：總結(jié)幾個(gè)移動(dòng)端H5軟鍵盤的大坑
    分享地址：http://www.5511xx.com/article/djhiegg.html