ios弹出软键盘时fixed失效及点击空白处隐藏层的解决办法

一、实现点击按钮弹出层和点击空白处隐藏层,event.stopPropagation()是关键,阻止传导。

<script type="text/javascript">
$(function () {
$(‘#btnShow‘).click(function (event) {
event.stopPropagation();
$(‘#div_apply‘).toggle();
});
$(document).click(function (event) { $(‘#div_apply‘).hide() });
})
</script>

二、ios中,页面使用position:fixed定位头部或尾部,而页面中同时具有input或textarea输入框,在输入框获取焦点,弹出软键盘时,原本固定在头尾的栏会跑到页面中间,解决办法是判断在ios下将定位方式修改为绝对定位

<script type="text/javascript">
if(/iphone|ipad|ipod/i.test(navigator.userAgent))
{
$(".head").css("position", "absolute");
};
</script>

时间: 2024-10-22 19:21:02

ios弹出软键盘时fixed失效及点击空白处隐藏层的解决办法的相关文章

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

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

弹出软键盘时,不把activity整体往上移,只移动部分

如图,EditText在整个activity的最下方,当弹出软键盘时,如果整个activity往上移动,会导致最上面那些部分会看不见,而中间又还有这么多空白的空间,显然不合理. 为了只移动activity中的部分空间,可以将这块部分放在ScrollView中,设置ScrollView的layout_weight="1",即让他占满空位.当弹出软键盘时,就会去移动这部分的空间了.

移动端弹出软键盘导致input光标和点击事件错位问题

我遇到的问题:在微信浏览器里,点击蒙层的input框,弹出软键盘,蒙层被顶上去,同时input的焦点和button的点击事件也被顶上去了,软键盘消失,蒙层回到原位,但是点击input和button均没反应,点击蒙层被顶上去的位置有反应,因为input的焦点和button的点击事件没回到原位.这个问题出现在ios中,android手机没问题. 以下是一位大佬写的解决方法,解决了我的问题. 原文地址:https://blog.csdn.net/Doubleu_/article/details/865

[Phonegap+Sencha Touch] 移动开发24 包wp8.1的App,弹出软键盘输入框聚焦实施后,无移动采收率方法来解决接口

这种现象不仅是现在显示phonegap包sencha touch的wp8.1该程序将出现(只wp8.1,wp8正常).其他js我测试了几个框架(app framework, jquery mobile),好像没有这个问题. 我来描写叙述一下这个现象: 1.执行phonegap打包的wp8程序,打开一个有输入框的界面,例如以下图: 2.点击输入框,使其弹出软键盘.界面会上移.例如以下图: 3.点返回键隐藏软键盘(或者点击界面上其他地方隐藏软键盘),此时界面不恢复原位.例如以下图: 我的一些研究结果

[Phonegap+Sencha Touch] 移动开发24 打包wp8.1的App,运行时输入框聚焦弹出软键盘之后,界面上移而不恢复原位的解决办法

这个现象只出现在phonegap打包sencha touch的wp8.1程序会出现(仅wp8.1,wp8正常),其它js框架我测试了几个(app framework, jquery mobile),好像没有这个问题. 我来描述一下这个现象: 1.运行phonegap打包的wp8程序,打开一个有输入框的界面,如下图: 2.点击输入框,使其弹出软键盘,界面会上移,如下图: 3.点返回键隐藏软键盘(或者点击界面上其它地方隐藏软键盘),此时界面不恢复原位,如下图: 我的一些研究结果: 1.这种现象只出现

Android 弹出软键盘android:windowSoftInputMode设置总结

当在Android的layout设计里面如果输入框过多,则在输入弹出软键盘的时候,下面的输入框会有一部分被软件盘挡住,从而不能获取焦点输入.或者是有使用framentlayout悬浮在底部的button也会挡住输入框. 一.解决办法 方法一: 在你的activity中的oncreate中setContentView之前写上这个代码getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN); 方法二:

Android--点击EditText的时候弹出软键盘,点击EditText之外空白处软键盘消失

在android中点击EditText的时候会弹出软键盘,但当我们输入完毕或者想隐藏软键盘时,我们可以点击软键盘上的隐藏按钮,这种方法固然可行,但是为了提高用户体验,我们常常要实现这种功能:当输入完毕后想隐藏软键盘时我们通过直接点击EditText的之外的其他空白处就可以隐藏软键盘,这种做法明显比点击软键盘自身的隐藏按钮要方便的多. 要实现上述功能只需重写 public boolean onTouchEvent(MotionEvent event)方法,做相应软键盘隐藏的处理操作即可. Inpu

mui+回复弹出软键盘

最近再做一个APP的时候,有一个评论回复的功能,在做APP的时候,直接用手指触发focus事件,来唤醒软键盘的弹出没有问题, 但是现在的功能需要对点击回复进行弹出软键盘来操作,参考过很多都有问题,后来仔细看了下官方的DEMO,发下这个问题是可以被解决掉的.具体方法如下: <style type="text/css"> .show-input-main{width: 100%; height:40px; border: 1px solid red; position: fix

android的alertdialog中加入edittext但是不弹出软键盘等问题的解决与原因

摘要:alertdialog中加入edittext但是不弹出软键盘等问题网上有很多不管用的解决方案, 本文意在给出更有效的解决办法,并初步探究其原因 正文 在对话框中插入文本框是十分常见的需求 通常我们选择在代码中创建edittext对象 这个时候就需要在代码中给edittext设置输入属性了 但是经常发现设置的属性不起作用,甚至都不弹出软键盘(虽然实体键盘可以输入) 问题的解决方案有很多种,这里介绍一种我比较常用的方法: inputPassEditText.setInputType(Input