娱乐
软键盘(总结几个移动端H5软键盘的大坑【实践】)

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

Element.scrollIntoViewIfNeeded()方法也是用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。但如果该元素已经在浏览器窗口的可见区域内,则不会发生滚动。此方法是标准的Element.scrollIntoView()方法的专有变体。

window.addEventListener('resize', function() {  if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'textarea') {    window.setTimeout(function() {      if ('scrollIntoView' in document.activeElement) {        document.activeElement.scrollIntoView(false)      } else {        document.activeElement.scrollIntoViewIfNeeded(false)      }    }, 0)  }})

2、ios 键盘收起时页面没有回落,底部会留白

部分 ios 机型 中 input 键盘事件 keyup、keydown、等支持不是很好, 用 input 监听键盘 keyup 事件,在安卓手机浏览器中没有问题,但是在 ios 手机浏览器中用输入法输入之后,并未立刻响应 keyup 事件

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

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

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

github 源码地址:fastclick.js

//line 391行FastClick.prototype.onTouchStart = function(event) {  //在其方法中添加判断 符合ios select的时候 不返回事件  if (deviceIsIOS && this.targetElement == 'select') this.targetElement = null  event.preventDefault()}//line521 或者讲源码中 有关touchEnd判断非ios或者非select的事件注释,if (!deviceIsIOS || targetTagName !== 'select') {  this.targetElement = null  event.preventDefault()}

6、ios 下 fixed 失效的原因

解决方法: 不让页面滚动,而是让主体部分自己滚动,主体部分高度设为 100%,overflow:scroll

<body>  <div class='warper'>    <div class='main'></div>  <div>  <div class="fix-bottom"></div></body>
.warper {  position: absolute;  width: 100%;  left: 0;  right: 0;  top: 0;  bottom: 0;  overflow-y: scroll;  -webkit-overflow-scrolling: touch; }.fix-bottom {  position: fixed;  bottom: 0;  width: 100%;}

7、ios 键盘换行变为搜索

  1. input type="search"
  2. input 外面套 form,必须要有 action,action="javascript:return true"
  3. 表单提交阻止默认提交事件
<form action="javascript:return true" @submit.prevent="formSubmit">  <input type="search" placeholder="请输入诉求名称" id="search" /></form>

顶一下()     踩一下()

热门推荐

发表评论
0评