总结几个移动端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软键盘的大坑
    本文链接：http://www.mswzjz.cn/qtweb/news33/303383.html

    攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

    广告

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

    贝锐智能技术为您推荐以下文章

    网站设计知识

    同城分类信息

    成都封阳台　　 　网站设计制作　　 　网站空间　　 　重庆服务器托管　　 　企业网站制作　　 　路面机械及配件　　 　成都网站建设　　 　成都做网站　　 　成都IDC机房托管　　 　企业邮箱　　 　域名ssl证书　　 　成都网站制作　　 　制作网站　　 　创新互联重庆　　 　乐山服务器托管　　 　成都众诚伟业　　 　成都网站改版公司　　 　定制网站建设　　 　成都建网站　　 　网络推广