输入框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 聊天项目,踩过其中一大坑:输入框获取焦点,软键盘弹起,要求输入框吸附(或顶)在输入法框上.需求很明确,看似很简单,其实不然.从实验过一些机型上看,发现主要存在以下问题: ...
随机推荐
- Delphi 带星期几的日期格式化
把日期按日期+星期几的格式输出 方法1:DatetoStr + DayOfWeek计算 ,这种办法灵活,但计算量大,不再祥叙. 方法2:FormatDateTime 具体代码如下://这里需要用For ...
- c++重要知识点
C++重要知识点精华总结 cin的使用: 1>cin>>a;键盘读入数据赋值给a; 1>程序的输入都建有一个缓冲区,即输入缓冲区.一次输入过程是这样的,当一次键盘输入结束时会将 ...
- 强大的金融类图表库 TradingView 使用分享
这段时间刚好做币圈交易所,运用到了现在最火的金融类图表库 -- TradingView ,就是强大,基本上现在的火币网(https://www.huobi.com),币安网(https://www.b ...
- bzoj1688
题解: 暴力枚举生哪一些病 然后判断一下即可 代码: #include<bits/stdc++.h> using namespace std; ,D=; int d,k,n,a[N][D] ...
- Vue.directive添加全局指令详解
自定义指令创建: Vue.directive( 'mycolor(指令名称:推荐全部小写,驼峰命名会出现问题,看最后面)' , { bind:function(){}, //本例只介绍inserted ...
- 【基于微信小程序的社区电商平台】需求分析心得——小豆芽
一.项目内容 基于微信小程序,做一个社区电商平台,抓住社区电商的特点,做出特色,与微信集成,实现商品的个性化发布,以及个性化营销. 个性化发布:用户可以在应用上直接发布自己的商品,通过搜索心愿单可以查 ...
- 为什么Vuex内数据改变了而组件没有进行更新?
这两天在进行一个首页的制作,结果就碰到了标题上所述的问题了,用了一天的时间在网上查资料.终于找出了问题所在 Vuex的数据写在store里,在组件中需要用到this.$store.commit() 来 ...
- 列举至少3种Support包中提供的布局或工具
android.support.v7.widget.CardView 继承自FrameLayout并实现了圆角和阴影效果,常用于ListView或RecyclerView中Item布局的根节点 示例代 ...
- 浅析构造函数,及public、private、protected、final、this、super关键字
初学JAVA,感觉很多知识点不熟悉,看了好多遍教材,最终还是决定把它写下来,加深印象以便忘了的时候再过来复习一下.看上去字数可能比较多,其实内容很简明. 首先看this的用法: package tes ...
- ubuntu 谷歌浏览器打开时需要输入密码来解锁密码环
问题: ubuntu14.04, 设置系统自动登陆账户,但每次开机打开 google chromium 浏览器,会要求输入一次密码,来解锁登录密钥环.很麻烦. 解锁登录密钥环:输入密码以解锁您的登录密 ...