输入框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 聊天项目,踩过其中一大坑:输入框获取焦点,软键盘弹起,要求输入框吸附(或顶)在输入法框上.需求很明确,看似很简单,其实不然.从实验过一些机型上看,发现主要存在以下问题: ...
随机推荐
- Java 自增原理
很多人都知道 i++ 和 ++i 的区别 a = i++: a = i; i = i+1; a = ++ i; i = i + 1; a = i; 但碰到 i = i ++;的时候很多人就懵了? i是 ...
- AI 帮助涂鸦
这个小工具挺有意思,可以在涂鸦的同时自动猜测你要画什么,并自动完成. https://quickdraw.withgoogle.com/
- LAMP分离搭建WordPress
实验环境:centos6.5 php5.3.6 http2.4.35 yum安装mysql 关闭三台主机的Selinux.iptalbes 配置apache: 解压软件包 安装依赖包:pcre-dev ...
- vue 特点
1.双向绑定 v-model 2.组件化 页面扩展 单文件组件 js css html 都在一个文件中 好处:前端组件化的突破性设计 scoped限制css的渲染,防止污染 lang 定义预处理器 ...
- 用Git将本地项目推送到github
[博客园cnblogs笔者m-yb原创,转载请加本文博客链接,笔者github: https://github.com/mayangbo666,公众号aandb7,QQ群927113708] http ...
- servlet异步处理机制
Servlet 3.0 之前,一个普通 Servlet 的主要工作流程大致如下:首先,Servlet 接收到请求之后,可能需要对请求携带的数据进行一些预处理:接着,调用业务接口的某些方法,以完成业务处 ...
- 自动化运维之ansible
第三十九课 自动化运维之ansible 目录 十五. ansible介绍 十六. ansible安装 十七. ansible远程执行命令 十八. ansible拷贝文件或目录 十九. ansible远 ...
- python的迭代器
迭代器 我们已经知道,可以直接作用于for循环的数据类型有以下几种: 一类是集合数据类型,如list.tuple.dict.set.str等: 一类是generator,包括生成器和带yield的ge ...
- 软工个人作业4——Alpha阶段个人总结
一.个人总结 1.在alpha 结束之后, 每位同学写一篇个人博客, 总结自己的alpha 过程: 经过本次alpha阶段的冲刺,首先学到了很多,收获了很多,同时也蛮辛苦的.其实我觉得作为组员我有很认 ...
- go语言关于线程与通道channal
在go语言中,封装了多线程的使用方法,使其变得简单易用. 在这里说说自己一点体会,不正确的地方还是请各位大牛指正. 关于go语言的并发机制,这很简单,在你要执行的函数前面加上go即可 比如: pack ...