解决Android软键盘弹出覆盖h5页面输入框问题 // 在ios系统中输入框软键盘消失后，页面不回弹的问题 // 解决苹果不回弹页面 // 微信环境打开

//解决Android软键盘弹出覆盖h5页面输入框问题

window.addEventListener('resize', () => {if (document.activeElement.tagName == 'INPUT') {//延迟出现是因为有些 Android 手机键盘出现的比较慢window.setTimeout(() => {document.activeElement.scrollIntoViewIfNeeded();}, 100);} });

//在ios系统中输入框软键盘消失后，页面不回弹的问题

 var u = navigator.userAgent, app = navigator.appVersionvar isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端$(document).ready(function(){$("input").blur(function(){if (isIOS) {blurAdjust()}});});// 解决苹果不回弹页面
function blurAdjust(e){setTimeout(()=>{// alert("1231321233")if(document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA'){return}let result = 'pc';if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOSresult = 'ios'}else if(/(Android)/i.test(navigator.userAgent)) {  //判断Androidresult = 'android'}if( result = 'ios' ){document.activeElement.scrollIntoViewIfNeeded(true);}},100)}

解决微信环境中键盘收起页面不回弹的问题

function isWeiXinAndIos(){const ua = `${window.navigator.userAgent.toLowerCase()}`;const isWeixin = /MicroMessenger/i.test(ua);const isIos = /\(i[^;]+;( U;)? CPU.+Mac OS X/i.test(ua);return isWeixin && isIos;}function weChatInputBug() { // 解决微信键盘收起页面不回弹的问题let myFunction;const isWXAndIos = this.isWeiXinAndIos();if (isWXAndIos) {document.body.addEventListener('focusin', () => {clearTimeout(myFunction);});document.body.addEventListener('focusout', () => {clearTimeout(myFunction);myFunction = setTimeout(() => {window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });}, 200);});}}weChatInputBug();

// 微信环境打开

function isWeiXin() {var ua = window.navigator.userAgent.toLowerCase();//判断企业微信和个人微信let isWx = ua.match(/MicroMessenger/i) == 'micromessenger';if(!isWx){return false;}else{let isWxWork = ua.match(/WxWork/i) == 'wxwork';if(isWxWork){return false;//企业微信}else{return true;//个人微信}}//只判断微信环境// if(ua.match(/MicroMessenger/i) == 'micromessenger'){//     return true;// }else{//     return false;// }}if(!isWeiXin()){document.body.innerHTML='<p class="weixindes" style="margin:0.7rem auto 0;line-height: 1.7;padding:0 0.3rem;font-size:0.3rem;text-align: left;">' +'<span>因涉及到微信支付<span><br>\n' +'请使用个人微信扫码或点击右上角分享到个人微信，然后再次打开，献出您的爱心，谢谢</p>'}

解决Android软键盘弹出覆盖h5页面输入框问题 // 在ios系统中输入框软键盘消失后，页面不回弹的问题 // 解决苹果不回弹页面 // 微信环境打开相关推荐

安卓手机键盘弹出导致h5页面错乱
安卓手机键盘弹出导致h5页面错乱特别是有表单的h5,点击input输入信息的时候提交的按钮.以及定位到下方的图片都会被挤上来. 解决方法如下: <div class="bg_img& ...
android软键盘弹出底部有黑色闪出,vue移动端安卓软键盘弹出底部按钮顶起
在做一个基于企业微信的h5移动页面时,当软键盘弹出时,底部fixed定位在ios上没事,安卓手机上,底部按钮会被顶起到软键盘,查看原应时由于软键盘顶起时,安卓设备的视图会变小.造成固定定位按钮呗顶起. ...
android webview监听软键盘弹出和隐藏来修改虚拟导航栏颜色
最近项目中用到了webview,然后里面有输入框,当我们点击输入框的时候,软键盘挡住了布局,这就尴尬了,并且产品说,只有在软键盘弹出的时候底部的虚拟导航栏为黑色,软键盘隐藏的时候虚拟导航栏应该也隐藏. ...
Android页面监听虚拟键盘弹出、收起
js 移动端关于页面布局,如果底部有 position: fixed 的盒子, 又有input,当软键盘弹出收起都会影响页面布局. 如图: 页面这时候Android可以监听resize事件,代码如下, ...
android 键盘弹出监听,奇技淫巧之-Android监听键盘弹出与隐藏事件
CaptainAndroid.png 相信看到这个标题,大家都会潜意识觉得:Activity中没有可以复写的方法么?或者说,没有什么listener可以让我们使用么? 抱歉,真的没有,我们潜意识都是以 ...
php手机网页弹出软键盘代码,Html5页面上如何禁止手机虚拟键盘弹出
工作中遇到如下需求,点击输入框弹出自定义弹窗,输入框是input标签: 但是在移动端,input会默认触发手机的虚拟键盘,如何阻止手机虚拟键盘弹起呢?目前我试过有两个方案,一个是给input添加rea ...
Android EditText不弹出输入法焦点问题的总结
同样的代码,碰到有EditText控件的界面时有的机子会弹出输入法,有的机子不会弹出.不好意思,这问题我也一头雾水,谁知道可以告诉我,否则我就把这个问题留下来,以后研究android 源码时再搞个清楚 ...
android 盒子输入法不弹出来,Android EditText不弹出输入法焦点问题的总结
看一个manifest中Activity的配置,如果这个页面有EditText,并且我们想要进入这个页面的时候默认弹出输入法,可以这样设置这个属性:android:windowSoftInputMod ...
Fix一个随机出现的键盘弹出的issue后的思考（ReactNative）
最近花了近一周fix了一个移动端的bug,是个很有趣的bug,大概是这样的.这是一个比较长的故事,有兴趣的可以一直看. 是一个什么样的bug bug的表现是在一款tablet端应用使用很久之后,第一, ...

解决Android软键盘弹出覆盖h5页面输入框问题 // 在ios系统中输入框软键盘消失后，页面不回弹的问题 // 解决苹果不回弹页面 // 微信环境打开

解决Android软键盘弹出覆盖h5页面输入框问题 // 在ios系统中输入框软键盘消失后，页面不回弹的问题 // 解决苹果不回弹页面 // 微信环境打开相关推荐

最新文章

热门文章