问题出现在东钿微信公众号用户注册页面 页面中只有两个输入框 页面没有超过一屏,悬浮按钮也要出现在本页面 ,开始布局页面的时候没什么问题,然后我在我自己手机上测试 ,输入手机号码,非常奇怪的问题出现了,当输入框获取焦点 输入第二个文字的页面就全部隐藏,一开始在群里问了 ,然后别人也没有出现这种情况,那我就悲催了 ,一个大神说可能是代码问题,我检查了代码 看看有木有没有闭合的,查了一通,最后还是百度找了一篇文章说 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. iOS开发:iOS的整体架构以及API介绍

    iOS的整体架构分为4层——Cocoa Touch层.Media层.Core Services层和Core OS层,下面概要介绍一下这4层. Cocoa Touch:构建iOS应用的一些基本系统服务, ...

  2. UVa 1467 (贪心+暴力) Installations

    题意: 一共有n项服务,每项服务有安装的时间s和截止时间d.对于每项任务,如果有一项超出截止时间,惩罚值为所超出时间的长度.问如何安装才能使惩罚值最大的两个任务的惩罚值之和最小. 分析: 如果是求总惩 ...

  3. Java知识点:内部类

    内部类class文件命名规则 普通内部类.静态内部类:<Outer>\$<Inner>.class,其中<Outer>为外部类类名,<Inner>为内部 ...

  4. None

    0 值的整型 / 浮点型.空字符串('').空列表([]). 空元组((,)).空字典({}).空集合(set())都等价于 False,但是不等于 None thing = None if thin ...

  5. angular js 指令的数据传递 及作用域数据绑定

    <div my-directive my-url="http://google.com" my-link-text="Click me to go to Googl ...

  6. 一、oracle 高水位线详解

    一.什么是水线(High Water Mark)? 所有的oracle段(segments,在此,为了理解方便,建议把segment作为表的一个同义词) 都有一个在段内容纳数据的上限,我们把这个上限称 ...

  7. OSGI框架学习

    OSGI框架三个重要概念 OSGi框架是根据OSGi规范中定义的三个概念层设计的:模块.模块生命周期.服务. 模块层定义了OSGi模块的概念(bundle,即包含一个元数据MANIFEST.MF的JA ...

  8. andorid 下拉刷新

    1:android的下拉刷新操作是需要一个ListView,通过onTouchEvent来判断用户的手势操作,用户触摸屏幕并且下拉时,当下拉超过指定的设定高度时就提示用户进行刷新. 2:当进行刷新时, ...

  9. Oracle 存储过程动态建表

    动态sql,顾名思义就是动态执行的sql,也就是说在没执行之前是动态的拼接的. 任务 传入参数:新建的表名hd+当前的年和月,例如hd_201105表结构是:字段1:id ,类型是number,可以自 ...

  10. Spring的事务传播属性,数据库的隔离级别

    Spring事务的传播属性  REQUIRED 业务方法需要在一个事务中运行,如果方法运行时,已处在一个事务中,那么就加入该事务,否则自己创建一个新的事务.这是spring默认的传播行为. SUPPO ...