IOS下 input 被软键盘方案遮盖问题解决

【IOS下 input 被软键盘方案遮盖问题解决】的更多相关文章

IOS下 input 被软键盘方案遮盖问题解决

前言: 并没有完美解决 ! 场景: 最近在做企业微信H5的一个项目,里面有个动态列表页,开始输入框是隐藏的,点击评论才会出现并让 input 聚焦.经过测试在安卓上面应该没什么问题,但是iOS上面会出现 input 被软键盘遮盖或者半遮盖.甚至发送按钮不能点击的状况. 总的来说问题有点小严重. 查阅百度: 好的,百度一搜,哇!解决方案很多,我就放心的去抽了一根烟,想着分分钟完事.BUT 经过试验百度 “ios 下input 被软键盘遮盖” 前两页没有一个能解决我的问题的!!! 不过收获还是有的…

移动端踩坑之旅-ios下fixed、软键盘相关问题总结

最近一个项目掉进了移动端的大坑,包括ios下fixed布局,h5唤起键盘等问题,作为一个B端程序员,弱项就是浏览器的兼容性和移动端的适配(毕竟我们可以要求使用chrome),还好这次让我学习了一下相关知识.让我们一起来看一下我怎么挣扎出这个大坑的. 一.背景先看一下要做什么,也就是一个文章评论的版块,下面依次有输入框,点赞,收藏等 .大概长下面这个样子: 要求也很常规,吸底,输入评论提交.那么上来就输代码吧. 二.ios下fixed布局关于这种吸底操作,上来就直接选用fixed了,这种场景舍…

ios safari input fixed 软键盘里的爱恨情仇

请看第一题: 为什么我的input获取焦点后,被输入法遮住了. 解决办法: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.1.0.js"></script> <style&g…

ios下input focus弹出软键盘造成fixed元素位置移位

正常状态下 input focus软键盘弹出时问题描述: 头部结构fixed,滚动到下部内容区域,input.textarea等focus弹出软键盘时,头部位置偏移被居中(该问题ios7 beta3已修复),当软键盘关闭时,头部结构位置又恢复正常安卓手机下,fixed表现要比ios好,不会出现此问题然而在移动端里,基本上所有手机,页面滚动的时候,任何js都不会执行,所以寻找css的方法(且js方法比较消耗性能) 各类大网站的解决方法:一般是页面上避免悬挂元素,或者有悬挂元素时,避免产生软键…

页面的input唤醒软键盘再收起后，页面会出现软键盘高度的空白背景

微信浏览器在版本6.7.4及以上会有这个bug:页面的input唤醒软键盘再收起后,页面会出现软键盘高度的空白背景,触摸到滚动条会消失恢复! 解决代码后台框架嵌入iframe的情景,iframe内部页面输入框唤醒软键盘,控制顶层window滚动 var wechatInfo = navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i); if(wechatInfo){ $("input,textarea").blur(functi…

input获取焦点软键盘弹出影响定位

解决移动端底部fixed和input获取焦点软键盘弹出影响定位的问题$(document).ready(function() { var h = $(window).height(); $(window).resize(function() {//js写法:window.onresize=function() ,onresize 事件会在窗口或框架被调整大小时发生. …

web前端在 iOS下 input不能输入以及获取焦点之后会出现蓝色的border轮廓

iOS下 input 不能获取焦点获取焦点后:设置border:none无效果 .hb_content input{ display: inline-block; margin-left: 0.225rem; height: 1rem; border: none !important; outline: none; /** 控制iOS获取焦点后的轮廓 */ color: #000000; font-size: 100%; width: 50%; -webkit-user-select: aut…

ios下input获取焦点以及在软键盘的上面

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><meta name="viewport" content="widt…

IOS下HTML5获取焦点弹键盘

IOS下sifari和webview默认屏蔽textarea/inputbox获取焦点弹出键盘苹果移动设备的WebView默认屏蔽textarea/inputbox获取焦点弹出键盘,需要在APP页面加载完毕的时候,设置“keyboardDisplayRequiresUserAction(键盘由用户事件触发弹出)”为“No”,默认为Yes.必须要在页面加载完成的时候执行代码. 很多Hybrid的很多部分都是IOS原生WebView来设置的在原生添加代码: (void)webViewDidFin…

ios移动输入框被软键盘遮挡

页面输入框会出现被软键盘挡住的问题: 解决方法:获取input点击事件设置body高度 $('input').bind('click',function(e){ var $this = $(this); e.preventDefault(); setTimeout(function(){ $(window).scrollTop($this.offset().top-10 ); },200) })…

iOS自动自动隐藏软键盘

自动隐藏软键盘,分为两步,一个是单击软键盘外部任意空间:另外一个是单击软键盘上的return键.下面依次实现单击软键盘外部空间键隐藏软键盘: 一:在viewDidLoad中添加一个UITabGestureRecognizer,并将其添加到ViewController的view对象上 UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(dismissK…

ionic 项目中ios上遇到的软键盘输入法自动弹出的问题

一. 安装插件 cordova plugin add ionic-plugin-keyboard 二. 软键盘显示监听 window.addEventListener('native.keyboardshow', function (e) { // todo 进行键盘可用时操作 //e.keyboardHeight 表示软件盘显示的时候的高度 }) 软键盘隐藏监听 window.addEventListener('native.keyboardhide', function (e) { //…

h5软键盘挡住输入框问题解决（android）

问题移动端浏览器中的表单在部分android机型上测试,点击靠下的输入框时会遇到弹出的软键盘挡住输入框问题 ios可自身弹起(ios自身的调整偶尔也会出问题,例如第三方键盘会遮挡,原因是第三方输入法的tool bar或者键盘也被当做可视区域,这里不做讨论) 问题分析及解决办法确立最常见的是使用两个方法:scrollIntoViewIfNeeded().scrollIntoView(),使用方法自行百度.在我这里无效. 经测试发现android弹出键盘时有两种效果: 1.将activity挤压…

chrome下input文本框自动填充背景问题解决

chrome下input文本框会自动填充背景,只需要给文本框加一个样式即可解决问题 input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px white inset;}…

解决只读时ios下input光标问题

应用场景:在ios手机下对只读的input设置readonly=readonly属性还是会出现光标解决方法: //解决ios日期光标问题 $("#Stime ,#provinceCity").focus(function(){ document.activeElement.blur(); });…

在iOS下-input[disabled] 颜色变浅兼容&& input[readonly]仍可获取焦点解决方法

目标:在写input输入框时,想让其只读不写. 环境:在iPhone上本来用的时readonly,可是readonly,居然可以获取焦点,不能弹出键盘:安卓手机完全木有问题,所以去用了disabled,结果颜色又有问题,所以要多写几个属性,兼容一下. 解决方式: 1.用disabled兼容: <input type="text" disabled/> input[disabled],input:disabled,input.disabled { color: #444!i…

移动端解决fixed和input获取焦点软键盘弹出影响定位的问题

场景描述, 当document的高度不够window的高度时候,如在ip6中文档的高度比窗体的高度小,到底设计在最下方的区域没有在窗体最下方,就留有空白地方如下图的灰色部分 1. 解决初始化文档高度,让文档高度等于窗体高度,并fixed需要定位的区域在最下方 (function bottonm(){ if($(document).height()<$(window).height()){ $('.bottom_fix').css({'position':'fixed','bottom':'0px…

移动端Web开发,ios下 input为圆角

在处理input的问题时,一般不想要input的原来的样式,一般就直接处理 border: none; outline: none; background: transparent; 这样之后,一般就可以解决, 但是最近在写一个微信公众号的页面,其中就有用到input,老三件,手机一测ok(本人是安卓机),以为没啥问题呢, 后来同事一测(IOS),就告诉我,input是圆角,且有一条线, 如下图这是怎么回事呢,马上查资料, 有说这样的 -webkit-appearance: none; -we…

手机端上点击input框软键盘出现时把input框不被覆盖，显示在屏幕中间（转）

转载地址:https://www.cnblogs.com/xzzzys/p/7526761.html 1 用定位为题来解决var oHeight = $(document).height(); //浏览器当前的高度 $(window).resize(function(){ if($(document).height() < oHeight){ $("#footer").css("position","sta…

fixed固定时弹窗上的input被软键盘遮住的问题

<div class="pwhCover"> <div class="pwhCon"> <div class="pwhTop"> <img src="img/pwh.png" alt="" /> </div> <div class="pwhMid"> <div class="PwhInp"&…

h5项目中关于ios手机软键盘导致页面变形的完美解决方案

1.项目背景:vue项目,手机加短信验证码登录: 2.问题: 在ios中input吊起软键盘,输入完成后,收起软件盘,页面不会回弹,导致页面下方出现空白,也就是页面变形: 3.最开始的解决方案是,用input的失去焦点事件@focusout,在input失去焦点的时候让页面回滚到顶部,具体代码如下: // 首先,判断触发事件的目标元素是否是input输入框,我们只关注输入框的行为. if (e && e.target && e.target.tagName &&am…

H5软键盘弹起收回（IOS与Android）

IOS下中,软键盘处于窗口最顶层,与原有的窗口不冲突,所以底部导航条不会被顶起,但是在android下,软键盘与窗口处于同一层,所以当软键盘弹起时,当前窗口缩小,那么窗口内容自然要被挤: 解决办法: 安卓机:通过判断当前窗口的resize来判断窗口是否变化: //判断当前设备 var browser = { versions: function () { var u = navigator.userAgent, app = navigator.appVersion; return { tride…

iOS下调用元素的focus方法，input元素不聚焦，键盘不弹起的问题

页面元素 <input type="text" ref="elInput"/> <div style="margin-top:20px;" @click="confession()" ref="elBtn">点击使input聚焦 </div> js代码 methods(){ confession(){ this.$refs.elInput.focus()//显示键盘 }…

H5软键盘兼容方案

前言最近一段时间在做 H5 聊天项目,踩过其中一大坑:输入框获取焦点,软键盘弹起,要求输入框吸附(或顶)在输入法框上.需求很明确,看似很简单,其实不然.从实验过一些机型上看,发现主要存在以下问题: 在 Android 和 IOS 上,获知软键盘弹起和收起状态存在差异,且页面 webview表现不同. 在 IOS12 上,微信版本 v6.7.4 及以上,输入框获取焦点,键盘弹起,页面(webview)整体往上滚动,当键盘收起后,不回到原位,导致键盘原来所在位置是空白的. 在 IOS 上,使用第三…

可能这些是你想要的H5软键盘兼容方案

前言最近一段时间在做 H5 聊天项目,踩过其中一大坑:输入框获取焦点,软键盘弹起,要求输入框吸附(或顶)在输入法框上.需求很明确,看似很简单,其实不然.从实验过一些机型上看,发现主要存在以下问题: 在 Android 和 IOS 上,获知软键盘弹起和收起状态存在差异,且页面 webview表现不同. 在 IOS12 上,微信版本 v6.7.4 及以上,输入框获取焦点,键盘弹起,页面(webview)整体往上滚动,当键盘收起后,不回到原位,导致键盘原来所在位置是空白的. 在 IOS 上,使用第三…

safari浏览器fixed后，被软键盘遮盖的问题—【未解决】

safari浏览器fixed后,被软键盘遮盖的问题,已经有好多人问相关的问题,应该是问的角度不一样,还的再次提出咯. 问题描述测试环境:ios 10.2/10.3 简单来说就是在html5页面中底部有个fixed的区域,如图在点击输入框的时候,软键盘弹出,遮盖了fixed区域(这里页面整体上移了),如图但是当你点击"完成"让软键盘收起,再次点击输入框的时候,what?一切正常了-!如图(就是要这样子的嘛,之后收起弹出软键盘都正常了,不会遮盖fixed底部区域了!) 但是,但是,还…

解决微信H5页面软键盘弹起后页面下方留白的问题（iOS端）

前言:微信H5项目,ios端出现了软键盘输完隐藏后页面不会回弹,下方会有一大块留白最近微信和ios都有版本升级,不知道是哪边升级造成的,但是经过测试,软键盘收起后,再滚动一下页面,下面的留白就会消失.所以只要在输入完毕后模拟一下这个“滚动”的操作,就能解决问题了. 如果是用vue写的: <input type="text" @blur="fixScroll" placeholder="请输入xxx"/> //methods中添加:…

iOS中监控软键盘显示或隐藏的可靠方法

大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 如果你试图在软键盘的显示或隐藏时去改变的UI界面结构,仅有的方法是你可以依赖使用键盘的通知消息. UITextField代理消息只会在文本区域开始被编辑时发出,而不管屏幕上是否有软件盘显示. 记住,用户可以使用蓝牙键盘连接iOS设备,并且使用它去编辑文本区域或任何其他你App中可输入控件的内容. 在使用蓝牙键盘的情况下,并没有软键盘会显示在屏幕上--如果你在文…

【移动端debug-4】iOS下setTimeout无法触发focus事件的解决方案

开篇总结:其实目前无法解决这个bug. 这两天做项目遇到了这个case,项目需求是打开页面的时候,input元素自动弹起键盘.由于各种方面的考虑,我们希望通过setTimeout延时200毫秒让input元素focus,demo代码如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>IOS下setTimeout无…

Html-IOS下input的样式添加不上的解决方案

问题描述: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style> input { width: 100px; height: 25px; background-colo…