总结几个移动端H5软键盘的大坑

1. 部分机型软键盘弹起挡住原来的视图

成都创新互联公司专注于雅安企业网站建设,成都响应式网站建设公司,商城网站开发。雅安网站建设公司,为雅安等地区提供建站服务。全流程定制网站建设，专业设计，全程项目跟踪，成都创新互联公司专业和态度为您提供的服务

解决方法：可以通过监听移动端软键盘弹起。

Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。参数如下：

  • true，表示元素的顶部与当前区域的可见部分的顶部对齐
  • false，表示元素的底部与当前区域的可见部分的尾部对齐

Element.scrollIntoViewIfNeeded()方法也是用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。但如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动。此方法是标准的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 键盘收起时页面没有回落，底部会留白

部分苹果手机填写表单的时候的，输入内容后关闭软键盘，底部会留一块空白。这种情况可以通过监听键盘回落时间滚动到原来的位置。

 
 
 
    
  
  
  
  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 机型 中 input 键盘事件 keyup、keydown、等支持不是很好, 用 input 监听键盘 keyup 事件，在安卓手机浏览器中没有问题，但是在 ios 手机浏览器中用输入法输入之后，并未立刻相应 keyup 事件：

  • onkeypress 用户按下并放开任何字母数字键时发生。系统按钮(箭头键和功能键)无法得到识别。
  • onkeyup 用户放开任何先前按下的键盘键时发生。
  • onkeydown 用户按下任何键盘键(包括系统按钮，如箭头键和功能键)时发生。

4. ios12 输入框难以点击获取焦点，弹不出软键盘

定位找到问题是 fastclick.js 对 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 导致下拉框焦点冲突

移动端使用 fastclick 之后，在 ios 环境下，有几个连续的下拉框 第一个 select 框突然填充了第二个下拉框的内容。

根本原因是 Fastclick 导致 ios 下多个 select ，点击某一个，焦点不停变换的 bug。修改源码，在 onTouchStart 事件内判断设备是否为 ios，再判断当前 nodeName 是否为 select，如果是 return false 去阻止 fastClick 执行其他事件。

 
 
 
    
  
  
  
  1. //line 391行 
    2. 
  
  
  
  2. FastClick.prototype.onTouchStart = function(event) { 
    3. 
  
  
  
  3.   //在其方法中添加判断 符合ios select的时候 不返回事件 
    4. 
  
  
  
  4.   if (deviceIsIOS && this.targetElement == 'select') this.targetElement = null 
    5. 
  
  
  
  5.   event.preventDefault() 
    6. 
  
  
  
  6. } 
    7. 
  
  
  
  7. //line521 或者讲源码中 有关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，所以当页面超过一屏且滚动时，失效的 fixed 元素就会跟随滚动了。不仅限于 type=text 的输入框，凡是软键盘(比如时间日期选择、select 选择等等)被唤起，都会遇到同样地问题。

解决方法: 不让页面滚动，而是让主体部分自己滚动,主体部分高度设为 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滑动不流畅问题 */ 
      10. 
    
  
  
    10. } 
      11. 
    
  
  
    11. .fix-bottom { 
      12. 
    
  
  
    12.   position: fixed; 
      13. 
    
  
  
    13.   bottom: 0; 
      14. 
    
  
  
    14.   width: 100%; 
      15. 
    
  
  
    15. } 
      16.

    7. ios 键盘换行变为搜索

       
 
 
      
    
  
  
    1.  
      2. 
    
  
  
    2.    
      3. 
    
  
  
    3.  
      4.

    新闻标题：总结几个移动端H5软键盘的大坑
    URL地址：http://www.shufengxianlan.com/qtweb/news33/303383.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    外贸建站知识

    分类信息网

    广安网站建设　　 　成都网站推广　　 　新型地坪材料　　 　犀浦门窗定制　　 　乐山企业网站设计　　 　外贸网站建设方案　　 　APP定制　　 　服务器租用　　 　四川审计公司　　 　东电技改　　 　雅安主机托管　　 　蓬安网站建设　　 　响应式网站　　 　成都网站建设公司　　 　SSL认证　　 　解决方案　　 　绵阳网站建设　　 　品牌网站建设　　 　手机app　　 　软文推广公司