安卓手机 HTML5 手机页面 输入表单被键盘遮挡住了
TML5 手机页面 输入表单被键盘遮挡住了
请问 大神 怎么 js 或者 JQ 判断安卓手机软键盘的键盘隐藏键按下去了？
有使用 uexWindow 方法 能判断到确定键 是 13 但是不知道这个键的键值 是什么？
或者有什么其他方法？ 判断窗口尺寸改变的 size 方法无效
没有相关的事件来获取隐藏按钮点击，keydown/keyup事件中获取到的keyCode都是0，楚了你说的前往keyCode 13.
可以用计时器监视window.innerHeight高度改变来判断。
下面的代码在android chrome浏览器下测试正常，javascript检查android软键盘隐藏显示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<title>javascript检查android软键盘隐藏显示</title>
<input type="text" id="txt" />
<div id="dv"></div>
<script>
var timer, windowInnerHeight;
function eventCheck(e) {
if (e) { //click,focus事件触发的
$('#dv').html('android键盘' + (e.type == 'click' ? '弹出' : '隐藏') + '--通过' + e.type + '事件');
if (e.type == 'click') {//如果是点击事件启动计时器监控是否点击了键盘上的隐藏键盘按钮，没有点击这个按钮的事件可用，keydown中也获取不到keyCode值
setTimeout(function () {//由于键盘弹出是有动画效果的，要获取完全弹出的窗口高度，使用了计时器
windowInnerHeight = window.innerHeight;//获取弹出android软键盘后的窗口高度
timer = setInterval(function () { eventCheck() }, 100);//100ms检查下窗口高度是否改变
}, 500);
}
else clearInterval(timer);
}
else { //计时器执行的，需要判断窗口可视高度，如果改变说明android键盘隐藏了
if (window.innerHeight > windowInnerHeight) {//这里逻辑可以更改下，有可能其他js事件会导致高度变化，这里就只做个简单判断了
clearInterval(timer);
$('#dv').html('android键盘隐藏--通过点击键盘隐藏按钮');
}
}
}
$('#txt').click(eventCheck).blur(eventCheck);
//keydown/keyup获取按键值为0，keypress不执行。。
$('#txt').keydown(function (e) { $('#dv').append('<br>keydown:' + e.keyCode); }).keyup(function (e) { $('#dv').append('<br>keyup:' + e.keyCode); }).keypress(function (e) { $('#dv').append('<br>press:' + e.keyCode); });
</script>
安卓手机 HTML5 手机页面 输入表单被键盘遮挡住了的更多相关文章
- iOS 解决表单被键盘遮住的问题
问题 处理表单的时候,一定会碰到的就是输入控件被键盘遮住的问题,如图: 实例 左边是普通表单,中间是2B表单,右边是文艺表单. 分析 处理这种问题无非就是2个步骤: 键盘弹出时,缩小UITableVi ...
- HTML5手机页面里面如何把长按复制避免
在写HTML5手机页面的时候,有时候会写到一些标签是需要用户长按然后放开的 但是微信里面长按就会出现复制,大大影响了用户体验,那么如何可以避免呢? 我也是最近写到这样的页面,总结了一部分,大家可以作为 ...
- 基于HTML5手机登录注册表单代码
分享一款基于HTML5手机登录注册表单代码.这是一款鼠标点击注册登录按钮弹出表单,适合移动端使用.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=&qu ...
- IOS手机 html5页面 数字变成蓝色链接的原因
IOS手机 html5页面 数字变成蓝色链接的原因 这个是ios手机自动识别 写如下代码 即可<pre> <meta name="format-detection" ...
- HTML5手机APP开发入(4)
HTML5手机APP开发入(4) 课程内容 完成一个自定义的Component用来展现通讯录用户的明细信息如下图 http://bootsnipp.com/snippets/featured/prof ...
- fiddler抓包+安卓机 完成手机app抓包的配置 遇到的一些问题
fiddler抓包+安卓模拟器完成手机app抓包的配置:fiddler抓包+雷电模拟器 完成手机app抓包的配置 其实在安卓真机上弄比在虚拟机上弄更麻烦一点,它们的步骤都差不多一样,就是在安卓真机上弄 ...
- HTML5手机APP开发入(5)
HTML5手机APP开发入(5) 回顾一下 HTML5手机APP开发入(4) 如何自定义Component,directive HTML5手机APP开发入(3) 如何实现MVC的代码重构,自定义一个P ...
- HTML5手机APP开发入门(2)
HTML5手机APP开发入门(2) 课程内容 使用IonicFramework v2 + angular 2 完成一个简单的联系人列表的操作,有三个页面: ListPage,DetailPage,Ad ...
- html5手机Web单页应用实践--起点移动阅读
一开始以hybrid形式做了一个android的小说阅读客户端,叫4G阅读.而后由于业务需求,要迅速实现纯手机html5 版的,所以就直接在原先客户端内内嵌的网页进行改版,快速实现以后在优化的过程中发 ...
随机推荐
- IE兼容rgba()透明度
一般浏览器的背景透明度可以直接设置 background:rgba(0,0,0,.5); -webkit-background:rgba(0,0,0,.5); -o-background:rgba(0 ...
- 【转】Create Hello-JNI with Android Studio
[转]Create Hello-JNI with Android Studio From:https://codelabs.developers.google.com/codelabs/android ...
- UVA 10817 - Headmaster's Headache（三进制状压dp）
题目:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&category=20&pag ...
- 1.JOIN和UNION区别
1.JOIN和UNION区别join 是两张表做交连后里面条件相同的部分记录产生一个记录集,union是产生的两个记录集(字段要一样的)并在一起,成为一个新的记录集 . JOIN用于按照ON条件联接两 ...
- 【图文并茂】DEV配置NTL库
一开始根据陈老师的博客:再说如何在DEV C++中搭建NTL库 后来发现自己虽然跟着一步一步来做,还是做错了很多回. 究竟怎么一回事呢?后来我发现一个致命的错误很容易忽视,所以我就重新写一篇博客. 来 ...
- java 正则表达式如何提取中文的问题
String regex="([\u4e00-\u9fa5]+)"; String str="132更新至456"; Matcher matcher = Pat ...
- StringMVCWeb接受前台值的几种方式
这些决定与request header 的Content-Type属性 1.通过@RequestParam @RequestParam Map<String, Object> pa ...
- getpwuid和getpwnam的用法
如果知道一个用户的用户ID或者登录名,可以通过getpwuid或getpwnam函数获得用户的登录信息.函数原型为: #include <pwd.h> #include & ...
- graphviz 布局和子图,表格教程
有了这三个利器,就搞定架构图了. 子图间互相调用要开启 http://graphviz.org/pdf/dotguide.pdf
- <MySQL>入门一 查询 DQL
1. 数据库表 1.1 员工表 Create Table CREATE TABLE `employees` ( `employee_id` ) NOT NULL AUTO_INCREMENT, `fi ...