输入框VS软键盘
最近在做一个h5的时候遇到的问题
我们都知道当页面上的有输入框被选中了,这个时候就回调出键盘用户可以输入。但是安卓手机在弹出键盘时页面的输入框也会被覆盖住;
以下为暂时的解决办法:(以下方法同时解决了ois当失去焦点时,页面高度不能重置的问题)
解决思路:首先判断是机型----》强制将输入框显示到页面的可视区域内scrollIntoViewIfNeeded()相当于scrollIntoViewIfNeeded(true)
var u = navigator.userAgent.toLowerCase();
var isARD = u.indexOf('android') > -1 || u.indexOf('adr') > -1;
var isResize
//输入框
$("#inp_name,#inp_res").on("focus",function(e)
{
isResize=false;
})
$("#inp_name,#inp_res").on("blur",function(e)
{
window.scrollTo(0,0);
isResize=true;
resizeF()
})
if(isARD)
{
var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
window.addEventListener("resize", function()
{
if(document.activeElement.tagName=="INPUT" || document.activeElement.tagName=="TEXTAREA")
{
window.setTimeout(function()
{
document.activeElement.scrollIntoViewIfNeeded();
//document.activeElement.scrollIntoView();
},0);
}
var nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight;
if (clientHeight > nowClientHeight) {/*键盘弹出的事件处理*/}
else {/*键盘收起的事件处理8*/$("#inp_name,#inp_res").blur(); }
})
}
function resizeF()
{
setTimeout(function()
{
if(!isResize){return}
ww=$(window).width();hh=$(window).height();
//----------
$("#wrap").css({"top":(hh-defaultH)*.5});
window.scroll(0,0);
},100)
}
输入框VS软键盘的更多相关文章
- ios移动输入框被软键盘遮挡
页面输入框会出现被软键盘挡住的问题: 解决方法:获取input点击事件设置body高度 $('input').bind('click',function(e){ var $this = $(this) ...
- Android设置输入框和软键盘动态悬浮
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=&q ...
- flutter TextField 输入框被软键盘挡住的解决方案
以前搞ionic1~4的开发中 和react-native flutter中的机制完全不同, 在flutter 中 当前页面如果存在元素被软键盘挡住 的情况 页面元素的最外层肯定得嵌套一层 S ...
- IOS和安卓WEB页面,input输入框被软键盘遮挡解决方法
本来以为这问题就只有ios才有,身边也没有android机测试,网上一搜,貌似有这个问题的还不少.最后把各种解决方法试了一边,貌似没什么用. 最后是这样解决的: setInterval(functio ...
- KeyboardUtil【软键盘弹出后输入框上移一定的高度】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 演示获取软键盘高度并保存,然后根据输入框的原有位置是否被软键盘挡住了,如果被挡住了则将整体页面上移一定的高度,当软键盘隐藏的时候再下 ...
- 点击底部input输入框,弹出的软键盘挡住input(苹果手机使用第三方输入法 )
测试移动端页面的时候,偶然发现点击底部input输入框时,弹出的虚拟键盘偶尔会挡住input输入框. 输入框固定在页面底部,如图所示: input固定底部设计图.png 点击底部input输入框唤 ...
- Android软键盘遮挡布局的那些事
有朋友提到软键盘遮挡布局的问题,说网上找了很多资料都未能解决,下面我来总结一下那些事,有些内容也是从网友那里学来的,但是我都会自己验证正确了才会贴出来. 首先来分析下我们常见的遮挡问题有哪些(本次所说 ...
- 【移动开发】 Android隐藏输入法软键盘的一些说明
刚刚在写一个仿微信的Android聊天软件,在编写的过程中,发现一个严重的BUG---当用户点击输入框用软键盘输入文本的时候点击了"返回好友列表"的按钮,返回到好友列表时软键盘无法 ...
- H5软键盘兼容方案
前言 最近一段时间在做 H5 聊天项目,踩过其中一大坑:输入框获取焦点,软键盘弹起,要求输入框吸附(或顶)在输入法框上.需求很明确,看似很简单,其实不然.从实验过一些机型上看,发现主要存在以下问题: ...
随机推荐
- eregi
eregi (PHP 4, PHP 5) eregi — 不区分大小写的正则表达式匹配 说明 int eregi ( string $pattern , string $string [, array ...
- unity中的UGUI一些组件的使用
一.Toggle Group(Script) LeftButtons上添加Toggle Group组件,属性Allow Switch Off打对勾,代表它的所有子物体上带有Toggle组件的属性Is ...
- 关于sql注入漏洞的挖掘及渗透工具简介
大量的现代企业采用Web应用程序与其客户无缝地连接到一起,但由于不正确的编码,造成了许多安全问题.Web应用程序中的漏洞可使黑客获取对敏感信息(如个人数据.登录信息等)的直接访问. Web应用程序准许 ...
- Python_Mix*匿名函数,sorted,filter,map,递归函数,二分法查找
lambda匿名函数(函数名统一都叫lambda) 为了解决简单的需求而设计的一句话函数 语法: lambda 参数 返回值 n = lambda a,b: max(a,b) ret = n(9,4) ...
- PHP 轻量级 REST框架
GITHUB:https://github.com/jacwright/RestServer 简介: 一个PHP REST服务器,用于提供非常轻量级的REST API.很容易上手.独立于其他库和框架. ...
- Django REST framework---请求和响应
Django REST framework---请求和响应 [Request对象] 概念: 平时我们在写Django的视图函数的时候,都会带上一个request参数,这样就能处理平时搭建网站时,浏览器 ...
- Redis安装部署教程
1)下载 redis-3.2.9.tar.gz 2)用ssh工具连接目录主机,在命令窗口输入:mkdir -p /opt/redis创建redis文件夹 3)通过WinSCP工具将redis-3.2. ...
- python3.5+selenium3环境搭建
windows环境下的操作(例子中的浏览器以火狐浏览器为例,IE和谷歌与此浏览器同理): 准备工具如下: 下载python[python开发环境]:http://python.org/getit/ 下 ...
- 从0到1用eclipse用maven搭建web项目
1,默认已经搭建了JDK1.5以上,以及eclipseEE版本,和maven. 2,修改maven的本地仓库和镜像,修改本地仓库是为了方便我们管理,maven的默认仓库是在C盘的USER文件夹下,我一 ...
- 机器学习环境搭建-Pycharm
刚刚开始学习机器学习,遇到了很多的问题,尤其是搭建环境让我觉得脑袋特别疼.我用的是win8 64位操作系统,硬盘小的可怜.开始我也跟着下载了anaconda,后来发现anaconda一点儿不像说的那么 ...