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

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

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

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

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 键盘收起时页面没有回落,底部会留白

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

 window.addEventListener('focusout', function() {
window.scrollTo(0, 0)
}) //input输入框弹起软键盘的解决方案。
var bfscrolltop = document.body.scrollTop
$('input')
.focus(function() {
document.body.scrollTop = document.body.scrollHeight
//console.log(document.body.scrollTop);
})
.blur(function() {
document.body.scrollTop = bfscrolltop
//console.log(document.body.scrollTop);
})

3、onkeyUp 和 onKeydown 兼容性问题

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

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

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

定位找到问题是 fastclick.js 对 ios12 的兼容性,可在 fastclick.js 源码或者 main.js 做以下修改

 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)
targetElement.focus()
} else {
targetElement.focus()
}
}

5、fastclick 导致下拉框焦点冲突

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

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

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 失效的原因

软键盘唤起后,页面的 fixed 元素将失效,变成了 absolute,所以当页面超过一屏且滚动时,失效的 fixed 元素就会跟随滚动了。不仅限于 type=text 的输入框,凡是软键盘(比如时间日期选择、select 选择等等)被唤起,都会遇到同样地问题。

解决方法: 不让页面滚动,而是让主体部分自己滚动,主体部分高度设为 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; /* 解决ios滑动不流畅问题 */
}
.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>

总结几个移动端H5软键盘的大坑的更多相关文章

  1. H5软键盘兼容方案

    前言 最近一段时间在做 H5 聊天项目,踩过其中一大坑:输入框获取焦点,软键盘弹起,要求输入框吸附(或顶)在输入法框上.需求很明确,看似很简单,其实不然.从实验过一些机型上看,发现主要存在以下问题: ...

  2. h5软键盘挡住输入框问题解决(android)

    问题 移动端浏览器中的表单在部分android机型上测试,点击靠下的输入框时会遇到弹出的软键盘挡住输入框问题 ios可自身弹起(ios自身的调整偶尔也会出问题,例如第三方键盘会遮挡,原因是第三方输入法 ...

  3. 可能这些是你想要的H5软键盘兼容方案

    前言 最近一段时间在做 H5 聊天项目,踩过其中一大坑:输入框获取焦点,软键盘弹起,要求输入框吸附(或顶)在输入法框上.需求很明确,看似很简单,其实不然.从实验过一些机型上看,发现主要存在以下问题: ...

  4. 前端angularJS利用directive实现移动端自定义软键盘的方法

    最近公司项目的需求上要求我们iPad项目上一些需要输入数字的地方用我们自定义的软键盘而不是移动端设备自带的键盘,刚接到需求有点懵,因为之前没有做过,后来理了一下思路发现这东西也就那样.先看一下实现之后 ...

  5. 安卓H5软键盘遮挡输入框

    由于安卓app内嵌入H5页面,webview对于软键盘没有处理(如果不是产品强烈要求建议不要处理这种拆东墙补西墙的问题,因为其他的手机上可能会出现已经优化软键盘的情况) 1.input下方还有多余空位 ...

  6. 移动端定制软键盘样式 配置input属性的type属性

    1.当你的input输入的数据为链接地址时type属性可改为 type=url 最下面一栏就会出现.com 提高用户体验 2.当你的input输入的数据为email时type属性可改为 type=em ...

  7. H5软键盘弹起收回(IOS与Android)

    IOS下中,软键盘处于窗口最顶层,与原有的窗口不冲突,所以底部导航条不会被顶起,但是在android下,软键盘与窗口处于同一层,所以当软键盘弹起时,当前窗口缩小,那么窗口内容自然要被挤: 解决办法: ...

  8. 【笔记】移动端H5数字键盘input type=number的处理(IOS和Android)

    在Vue中的项目,基于VUX-UI开发,一个常见的需求: 1.金额输入框 2.弹出数字键盘 3.仅支持输入两位小数,限制最大11位数,不允许0开头 后续:与UI沟通后, 思路调整为限制输入,并减少正则 ...

  9. h5软键盘弹起 底部按钮被顶起问题解决

    解决思路: 当键盘弹起时隐藏掉按钮,键盘隐藏时按钮显示 监测键盘是否弹起(浏览器页面是否发生变化) 代码: 1.定义一个底部按钮 <div class="returnbtn" ...

随机推荐

  1. java实现第八届蓝桥杯数位和

    数位和 题目描述 数学家高斯很小的时候就天分过人.一次老师指定的算数题目是:1+2+-+100. 高斯立即做出答案:5050! 这次你的任务是类似的.但并非是把一个个的数字加起来,而是对该数字的每一个 ...

  2. Linux 用户管理命令-useradd

    useradd [选项] 用户名,用来添加用户,实质是创建了几个用户信息的相关文件,选项可以支持手动创建 常见选项 -u UID:手动指定用户的UID -d 家目录 -c 用户说明 -g 组名:指定用 ...

  3. 一个Redis查询案例

    1.远程登陆进服务器 使用ssh连接至Linux服务器中 2.接入redis集群 redis-cli -h 10.1.8.12 -p 29000 3.执行查询命令 根据userid查询用户的最近在线时 ...

  4. 点击 button 自动刷新页面

    问题:为什么点击 button 会刷新页面 ? 原因:你代码的写法可能如下图,把 <button> 按钮 写在 <form> </form> 标签里边啦. < ...

  5. leetcode 反转链表部分节点

    反转从位置 m 到 n 的链表.请使用一趟扫描完成反转. 说明:1 ≤ m ≤ n ≤ 链表长度. 示例: 输入: 1->2->3->4->5->NULL, m = 2, ...

  6. docker registry 镜像同步

    docker registry 镜像同步 Intro 之前我们的 docker 镜像是保存在 Azure 的 Container Registry 里的,最近我们自己搭建了一个 docker regi ...

  7. 用字典优化过长的if 语句

    如果代码中,if 语句,后面elif 过多,完全可以用字典来优化代码. def response(method): if method == "POST": return &quo ...

  8. 几款一元单片机对比:CMS8S5880、STM8S003、N76E003

    大概17年开始,STM8S003的价格被贸易商炒货,变得很不稳定,一度上涨到2~3元,因为市场需求大增,小家电.无线充和一些简单功能的产品,本人就有在空气净化器.433M触摸开关.数据收发模块.红外控 ...

  9. 力扣:二叉树着色游戏(DFS详解)

    有两位极客玩家参与了一场「二叉树着色」的游戏.游戏中,给出二叉树的根节点 root,树上总共有 n 个节点,且 n 为奇数,其中每个节点上的值从 1 到 n 各不相同. 游戏从「一号」玩家开始(「一号 ...

  10. c++ UDP套接字服务器端代码示范

    c++ UDP套接字服务器端代码示范 #include<winsock2.h> //包含头文件 #include<stdio.h> #include<windows.h& ...