ios的虚拟键盘与fixed移动端的bug

//$('#search')表单input;$('.search_out')浮动元素 var u = navigator.userAgent, app = navigator.appVersion;var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); if (isiOS) { $('#search').focus(function (e) { if(!window.res) { setTimeout(function(){var heig…

【小贴士】虚拟键盘与fixed带给移动端的痛！

前言今天来公司的主要目的就是研究虚拟键盘与fixed的问题,期间因为同事问起闭包与事件委托(阻止冒泡)相关问题,便穿插了一篇别的: [小贴士]工作中的”闭包“与事件委托的”阻止冒泡“,有兴趣的朋友可以去看看,因为首页只能放一篇,这个就略去了现在回到主要研究点,首先在移动端我们点击文本框后会出现一个虚拟键盘, 虚拟键盘让页面可视区域得到了充分利用,但是也带来了一些问题问题源头移动端虚拟键盘出现的条件是:文本框(文本类)获得焦点但是文本框获得焦点未必会弹出键盘!!! 收起虚拟键盘的条件是:…

ios下虚拟键盘出现"搜索"字样

最近在开发过程中,发现用户输入想要检索的内容,弹出虚拟键盘,在安卓机上虚拟键盘最右下角会有‘搜索’字样,而ios上虚拟键盘最右下角只有‘换行’字样, 这样用户体验就会大打折扣. 安卓机上虚拟键盘 ios上虚拟键盘 ios实现和安卓同样的效果代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name=&…

(转载)ios关闭虚拟键盘的几种方法

在iOS应用开发中,有三类视图对象会打开虚拟键盘,进行输入操作,但如何关闭虚拟键盘,却没有提供自动化的方法.这个需要我们自己去实现.这三类视图对象分别是UITextField,UITextView和UISearchBar.这里介绍一下UITextField中关闭虚拟键盘的几种方法. (miki西游 @mikixiyou 原文链接: http://mikixiyou.iteye.com/blog/1753330 ) 第一种方法,使用它的委托UITextFieldDelegate中的方法textFi…

ios设备触发虚拟键盘输入后position:fixed 无效的一些简单另类的解决方法。

首先看一下我要解决的问题,第一张图是正常的情况下,第二张图是点击了输入框之后的情况,就是要解决此问题~! 百度了一下解决方法,好像有以下的一些方法: 1. iscroll 2. Jquery Mobile 3. 监听屏幕滚动事件给 #footer 赋值由于本人新手,第1,2种的方法就没学过,所以暂时不用这2方法,来看第三种:监听屏幕滚动事件给 #footer 赋值 1. 首先设置 #footer 的 position 的值为 absolute 2. 然后用$(window).scroll()…

在移动端H5开发中(关于安卓端position:fixed和position:absolute；和虚拟键盘冲突的问题，以及解决方案)

一.在开发移动端webapp时,我们经常会遇到这样的问题,当我们需要在页面底部固定一个logo或者说明时,往往会采用position:fixed进行固定定位或者absolute定位到最底部这是一个很常规的操作,但是当页面上有input输入框时,当用户点击输入的时候,虚拟键盘被拉起,会造成我们在底部定位的内容,被谈起,而遮挡我们的输入框,造成无法输入或者界面布局不美观像下面这样其实造成这种问题的原因是手机的问题,虚拟键盘的唤起,改变了窗口本来的高度,而不是我们的样式设置的有问题,明白了这点,…

移动端ios针对input虚拟键盘挡住的问题

写移动端的时候发现input的虚拟键盘对Ios的手机不是很友好我的是苹果6 点击的时候经常会挡住input框针对这个问题找了很多发现都没效果最后发现用下面这段js就可以解决了 $("input").focus(function () { setTimeout(function () { $(window).scrollTop(window.innerHeight); }, 500); }); 这里有个问题就是会延迟500毫秒不过能解决问题就行…

IOS系统下虚拟键盘遮挡文本框问题的解决

最近在项目中发现同样的代码在Android端微信网页中点击文本框唤出的虚拟键盘不会遮挡文本框,但是在IOS端的微信网页中点击文本框唤出的键盘却在大部分情况下会遮挡文本框经过高人指点,这个问题终于解决了下面说说解决办法: 主要代码 document.body.scrollTop = document.body.scrollHeight; 然后在文本框获取焦点的时候,可以定义一个计时器,一直执行上面的那句话在文本框失去焦点的时候,就把之前的计时器清除掉即可 js写法: let interval…

1：MUI选择器组件抛出“n.getSelectedItem is not a function”异常的解决办法 2：mui三级联动 3：移动端关闭虚拟键盘

1:如下图问题:引用了mui的地址选择的三级联动的应用在h5上的组件百度发现别人思路对 Array 原型链方法扩充时,会抛出这个异常. 修改方法: mui.poppicker.js 第 112 行 getSelectedItems() 方法中把改为几经排查发现别的同事写到公共文件中一段对原型扩充引起的.去掉就好了. 2:mui地址三级联动 html: <div class="clearfix"> <div class="pull-left"…

H5 IOS 虚拟键盘不回落的问题

在 H5 页面中,会发现在高版本的 IOS 系统中(ios12以上)和微信版本6.7.x以上,都会发现 input 等输入框,输入内容之后发现虚拟键盘消失,但是页面出现大面积白框. 解决办法(最后加上是否是微信浏览器): document.addEventListener('focusout', () => { setTimeout(() => { let height = document.documentElement.scrollTop || document…

关闭ios虚拟键盘的几种方法

在iOS应用开发中,有三类视图对象会打开虚拟键盘,进行输入操作,但如何关闭虚拟键盘,却没有提供自动化的方法.这个需要我们自己去实现.这三类视图对象分别是UITextField,UITextView和UISearchBar. 这里介绍一下UITextField中关闭虚拟键盘的几种方法. (miki西游 @mikixiyou 原文链接: http://mikixiyou.iteye.com/blog/1753330 ) 第一种方法,使用它的委托UITextFieldDelegate中的方法textF…

收起虚拟键盘的各种方法 -- IOS

使用虚拟键盘来输入资讯,是 iOS 的重要互动方式之一,虚拟键盘通常会自动出现在可以编辑的 UITextField 或是 UITextView 的编辑事件中,叫出键盘固然容易,但是要把它收起来,可就没有这么简单,之前在 UITextField 输入结束后的收起小键盘的方式一文中,介绍了如何在编辑完成之后收起虚拟键盘,但是如果您的元件并没有对应的事件可以让你收起虚拟键盘,那又该如何做?下列我们以类似的元件 UITextView 为例,介绍一些通用的方法. 1. 点击编辑区以外的地方(UIView…

iOS开发中虚拟键盘相关的坑

初学者在学习iOS开发时,遇到在一个textField中输入完内容后却发现虚拟键盘无法隐藏起来而不知所措的情况的人一定不占少数吧.这篇文章就说说我遇到的和虚拟键盘有关的三个问题及解决对策. 在模拟器测试时跳不出虚拟键盘怎么办在顶部菜单的Hardware -> Keyboard中把Connect Hardware Keyboard的勾去掉. 在某个textField输入完后点击view的空白区域就自动隐藏虚拟键盘在viewController中重写touchesBegan或者tochesEnd…

关于cocos2d-x 中 CCEditBox 的输入位置和IOS虚拟键盘位置不重合的bug

这个文章的名字起的实在是有点长,主要是怕说不清楚. 在IOS上,输入时,我看到过的比较少,就两种,如附件两张图.一个是虚拟键盘的输入框完全是在CCEditBox上,另一张虚拟键盘的输入区域是紧挨着键盘的并且左对齐的. 我的cocos2d版本是2.1rc0-x-2.1.4,貌似是当前最新的. 因为项目需要,我使用了CCEditBox,实现一个聊天的功能.ipad上运行时发现,键盘自带的输入区域既不在CCEditBox上,也没有紧挨着键盘左对齐. 这就是需要我们调整虚拟键盘输入域的位置了.查看了CC…

移动端H5页面 input 获取焦点时，虚拟键盘挡住input输入框解决方法

在移动端h5开发的时候,发现如果input在页面底部,当触发input焦点的时候会弹出系统虚拟键盘,虚拟键盘会遮挡input输入框.这会很影响用户体验,于是在网上找到了如下的解决办法: 方法一:使用window.scrollTo() <input type="text" onfocus="inputFocus()"/> <script> function inputFocus(){ setTimeout(function(){ window.…

【转】iOS 上常用的两个功能：点击屏幕和return退出隐藏键盘和解决虚拟键盘挡住UITextField的方法

iOS上面对键盘的处理很不人性化,所以这些功能都需要自己来实现, 首先是点击return和屏幕隐藏键盘这个首先引用双子座的博客 http://my.oschina.net/plumsoft/blog/42545,他的文章写的很好,对大家的理解很有好处. 在 iOS 程序中当想要在文本框中输入数据,轻触文本框会打开键盘.对于 iPad 程序,其键盘有一个按钮可以用来关闭键盘,但是 iPhone 程序中的键盘却没有这样的按钮,不过我们可以采取一些方法关闭它.例如,我们可以实现按下 Rerun (有…

ios开发中关闭textview控件的虚拟键盘

在ios开发中,textfield控件在点击的时候出现虚拟键盘,关掉虚拟键盘可以通过虚拟键盘中的done button和点击view中的任意地方来关闭虚拟键盘. 1.第一种方法是textfield控件的虚拟键盘中的done按钮是通过在我们自己写的类加上一个接口:UIViewController<UITextFieldDelegate>来实现.然后再加上函数: -(BOOL)textFieldShouldReturn:(UITextField *)textField { [textField r…

h5移动端常见虚拟键盘顶起底部导航栏解决办法

在h5移动端开发中相信很多朋友跟我一样都会遇到页面底部导航被虚拟键盘顶起的问题,自己在网上找到的解决办法拿出来与大家分享,有不完美之处还望见谅,有更好的解决办法可以贴出来大家一起互相学习!! var oHeight = $(document).height(); //浏览器当前的高度 // 浏览器窗口发生变化时判断 $(window).resize(function(){ if($(document).height() < oHeight){ $('footer').hide(); }else{…

【土旦】vue 解决ios H5底部输入框获取焦点时弹出虚拟键盘挡住输入框以及监听键盘收起事件

问题描述 im聊天H5页面,在iOS系统下,inpu获取焦点弹出系统虚拟键盘时,会出现挡住input的情况,十分影响用户体验. bug图解决方法: html: <input type="text" v-model="msg" maxlength="500" ref="inputShow" @click="inputShow" /> js: setTimeout(()=>{ this.$r…

移动端H5页面_input获取焦点时，虚拟键盘挡住input输入框解决方法

虚拟键盘，移动web开发的痛

原生APP的弹出虚拟键盘和收回虚拟键盘,输入框始终贴在虚拟键盘的上方.如下图: 如果移动端web也想做类似的功能,可以实现吗? 你可能会说着:“不就是放一个position: fixed;的输入框在页面底部嘛,有什么好难的?!” 当时我也是这么想的(⊙﹏⊙),但事实真的是这样吗?下面我们来看一些测试结果. 安卓4.2.1-qq浏览器,测试结果如下: 如图所示,输入框不见了... 再看看ios的safari: 为何又多了条白带? 还有,收起键盘后,为啥页面下移了... 好吧,其实这只是问题…

【小贴士】zepto find元素以及ios弹出键盘可能让你很头疼

前言在此,我不得不说移动端的兼容问题很多,并且很令人头疼,这不,这个星期又有两个让我逮着了,一个是使用zepto过程中出现的问题,一个是ios虚拟键盘的问题我这里做一次记录,以免以后忘了,同时希望对后面做移动开发的朋友有一定帮助,首先,我们调一个简单的来说 zepto与querySelectorAll 首先,W3C提供了新的查询接口,querySelector与querySelectorAll 其中querySelector返回的是一个对象选择第一个对象,querySelectorAll返回…

H5禁止手机虚拟键盘弹出

点击输入框弹出自定义弹窗,输入框是input标:但是在移动端,input会默认触发手机的虚拟键盘,如何阻止手机虚拟键盘弹起呢?目前我试过有两个方案,一个是给input添加readonly属性,另一个就是在input事件处理方法前面添加一句 document.activeElement.blur(). 使用readonly属性使用readonly方式来阻止虚拟键盘弹出应该是最简单最优雅的方式了.readonly 属性规定输入字段为只读.只读字段是不能修改的.不过,用户仍然可以使用 tab 键切换…

移动H5页面，Android手机下，input获取焦点弹出系统虚拟键盘时，挡住input解决方法

最近在写移动端页面的时候,遇到一个问题,在Android手机下,虚拟键盘会将input框遮挡住,具体情况如下图所示: 正常页面显示 IOS端显示情况 Android端显示情况解决方式: <template> <div class="change-phone-box"> <img class="phone-img" :src="'img/change_telephone@2x.png' | assets" alt=…

使用vue实现简单键盘，支持移动端和pc端

常看到各种app应用中使用自定义的键盘,本例子中使用vue2实现个简单的键盘,支持在移动端和PC端使用,欢迎点赞,h5 ios输入框与键盘兼容性优化实现效果: Keyboard.vue <template> <div class="keyboard" v-show="showKeyboard" v-clickoutside="closeModal"> <p v-for="keys in keyList&…

隐藏虚拟键盘，解决键盘挡住UITextField问题

再正式开始之前,先来介绍一下IOS的键盘类型: 一.键盘风格 UIKit框架支持8种风格键盘 ? 1 2 3 4 5 6 7 8 9 10 typedef enum { UIKeyboardTypeDefault, // 默认键盘:支持所有字符 UIKeyboardTypeASCIICapable, // 支持ASCII的默认键盘 UIKeyboardTypeNumbersAndPunctuation, //…

ios7学习之路七（隐藏虚拟键盘，解决键盘挡住UITextField问题）

再正式开始之前,先来介绍一下IOS的键盘类型: 一.键盘风格 UIKit框架支持8种风格键盘 typedef enum { UIKeyboardTypeDefault, // 默认键盘:支持所有字符 UIKeyboardTypeASCIICapable, // 支持ASCII的默认键盘 UIKeyboardTypeNumbersAndPunctuation, // 标准电话键盘,支持+*#等符号 UIKeyboardTypeURL, // URL键盘,有.com按钮:只支持URL字符 UIKey…