问题出现在东钿微信公众号用户注册页面 页面中只有两个输入框 页面没有超过一屏,悬浮按钮也要出现在本页面 ,开始布局页面的时候没什么问题,然后我在我自己手机上测试 ,输入手机号码,非常奇怪的问题出现了,当输入框获取焦点 输入第二个文字的页面就全部隐藏,一开始在群里问了 ,然后别人也没有出现这种情况,那我就悲催了 ,一个大神说可能是代码问题,我检查了代码 看看有木有没有闭合的,查了一通,最后还是百度找了一篇文章说 fixed定位会跟input textare有各种千奇百怪的问题,于是我就灵机一动。想到了解决办法。就是当input获取焦点时,把fixed定位改成 static 失去焦点时 就改成fixed 这样问题解决了,代码如下

//软键盘遮掉输入框处理方法
$("input").focus(function(){
var num = $(this).offset().top-header_h;
$("html,body").animate({scrollTop:num},800);
$(".taoplus").css("position","static"); //关键代码

});
$("input").blur(function(){
$(".taoplus").css("position","fixed"); //关键代码

})

这个也应该是基础问题,经验不足 ,就一直瞎折磨。找不到方法 ,这个要积累起来,牢记在心。不要忘记。fixed 与input共存的问题。永远不要忘记。现在又是移动的天下。这些问题还是避免不了,而且必须解决的。所以碰到问题还是要找到问题根源。办法总是有的。

好了,对自己说再接再厉,前端grill。

fixed 定位 苹果手机输入框触发时内容全部隐藏的更多相关文章

  1. 【原创】修复ios输入框获取焦点时不支持fixed的bug

    前些日子,做了一个手机站的项目,有一个页面是这样的, 有一个固定(position:fixed)的头部和底部导航,中间是一些表单内容,没啥特别的.但是到了ios中,正常滚动页面没有问题,一旦触发了文本 ...

  2. js判断input输入框为空时遇到的问题 弹窗后,光标没有定位到输入框,而是直接执行我的处理页面程序

    无论是会员注册还是提交订单,我们都要使用到form表单,此时我们在处理数据时,就要判断用户填写的信息.一次是直接通过js判断input输入框是否没有填信息,然后在后台处理文件中通过过滤字符串后再次判断 ...

  3. 移动端ios 输入框fixed固定在底部 焦点时乱跳加遮盖问题的解决 转自zhangyunling 加个人项目解决方案

    如果您有过移动端的开发经验,那么您是否碰到过这样的问题,一个页面有输入框,当这个输入框聚焦时,输入框在IOS下,被移动到手机屏幕的当中去了,而在Android端,有些浏览器的输入框,会被键盘盖住. 1 ...

  4. 类似智能购票的demo--进入页面后默认焦点在第一个输入框,输入内容、回车、right时焦点自动跳到下一个,当跳到select时,下拉选项自动弹出,并且可以按上下键选择,选择完成后再跳到下一个。

    要实现的效果:进入页面后默认焦点在第一个输入框,输入内容.回车.right时焦点自动跳到下一个,当跳到select时,下拉选项自动弹出,并且可以按上下键选择,选择完成后再跳到下一个. PS:自己模拟的 ...

  5. 关于苹果手机微信端 position: fixed定位top导航栏问题

    在移动端,position: fixed定位一般不被识别,或者在ios系统中,获取input焦点时,会导致position: fixed的top失效,下面是我验证过的方法,大家可以试试.<!do ...

  6. IE11下使用fixed定位时鼠标滚动不平滑

    很久不用IE了,近期做兼容性测试发现一个fixed定位的问题,当元素使用fixed定位时,其应该不随页面滚动,在chrome/firefox/edge下都很完美,元素完全不动,但是使用IE11时,如果 ...

  7. 唤醒键盘时取消对特定类的position:fixed定位

    /* 唤起键盘时取消对特定类的position:fixed定位 */ var windheight = $(window).height(); /*未唤起键盘时当前窗口高度*/ $(window).r ...

  8. web移动端input获得光标Fixed定位失效解决方案

    移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有输 ...

  9. fixed定位兼容性

    不过从ios5.1以来,fixed定位就已经支持了,但很遗憾,ios现在对它还只是半支持. 但是在某些情况下,会出现一些比较奇葩的问题,比如fixed元素中存在输入框子元素,这个时候就会跪了. 可以看 ...

随机推荐

  1. datatable 的ajax修改参数,post可以传参处理

          datatables常用参数记录 {                "searchable": false,                "orderabl ...

  2. 基于phpExcel写的excel类

    <?php /* * 类的功能 * 传入二位数组导出excel * 传入excel 导出二位数组 * @author mrwu */ require('PHPExcel.php'); requi ...

  3. dagli最早干了这样一件事儿 Localization of Cardiac-Induced Signal Change in fMRI

    Localization of Cardiac-Induced Signal Change in fMRI 这篇文章是最早做生理噪声相关组织的定位的. 很奇特,因为,这位学者甚至得出了,血管心动等变化 ...

  4. noip2002提高组题解

    再次280滚粗.今天早上有点事情,所以做题的时候一直心不在焉,应该是三天以来状态最差的一次,所以这个分数也还算满意了.状态真的太重要了. 第一题:均分纸牌 贪心.(昨天看BYVoid的noip2001 ...

  5. RTP协议分析

      目录(?)[-] 第1章     RTP概述 RTP是什么 RTP的应用环境 相关概念 流媒体 第2章     RTP详解 RTP的协议层次 传输层的子层 应用层的一部分 RTP的封装 RTCP的 ...

  6. 安装Android SDK时,点击SDK Manager.exe闪退,并且jdk的环境变量是对的。

    前提:我的jdk的环境变量是正确的,同时我的jdk还是1.7应该不是版本太低的原因,同时这个压缩文件是好的,我在其他的电脑上可以运行SDK Manager.exe. 点击SDK Manager.exe ...

  7. binlog/relay_log的清理

    http://www.yuminstall.com/how-to-remove-mysql-relay-log.html CHANGE MASTER TO changes the parameters ...

  8. [Everyday Mathematics]20150116

    设 $\al_n\geq 0$ 且 $\dps{\vlm{n}\al_n=0}$, 试求 $$\bex \vlm{n}\frac{1}{n}\sum_{k=1}^n \ln\sex{\frac{k}{ ...

  9. MultiSet

    Guava引进了JDK里没有的,但是非常有用的一些新的集合类型.所有这些新集合类型都能和JDK里的集合平滑集成.Guava集合非常精准地实现了JDK定义的接口.Guava中定义的新集合有: Multi ...

  10. 滑动菜单栏开源项目SlidingMenu的使用

    一.SlidingMenu简介相信大家对SlidingMenu都不陌生了,它是一种比较新的设置界面或配置界面的效果,在主界面左滑或者右滑出现设置界面效果,能方便的进行各种操作.很多优秀的应用都采用了这 ...