问题出现在东钿微信公众号用户注册页面 页面中只有两个输入框 页面没有超过一屏,悬浮按钮也要出现在本页面 ,开始布局页面的时候没什么问题,然后我在我自己手机上测试 ,输入手机号码,非常奇怪的问题出现了,当输入框获取焦点 输入第二个文字的页面就全部隐藏,一开始在群里问了 ,然后别人也没有出现这种情况,那我就悲催了 ,一个大神说可能是代码问题,我检查了代码 看看有木有没有闭合的,查了一通,最后还是百度找了一篇文章说 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应用的视图状态分为以下几种 在viewcontroller的父类UIViewController中可以看到如下代码,通过重写不同的方法对操作视图渲染. @available(iOS 2.0, * ...

  2. BZOJ2594: [Wc2006]水管局长数据加强版

    题解: 裸LCT+离线+二分+MST... 代码:(几乎摘抄自hzwer) #include<cstdio> #include<cstdlib> #include<cma ...

  3. 漫谈 polling 和 Websocket

    Http被设计成了一个单向的通信的协议,即客户端发起一个request,然后服务器回应一个response.这让服务器很为恼火:我特么才是老大,我居然不能给小弟发消息... 轮询 老大发火了,小弟们自 ...

  4. hdu 4619 Warm up 2(并查集)

    借用题解上的话,就是乱搞题.. 题意理解错了,其实是坐标系画错了,人家个坐标系,我给当矩阵画,真好反了.对于题目描述和数据不符的问题,果断相信数据了(这是有前车之鉴的hdu 4612 Warm up, ...

  5. android和ios流媒体库推荐

    1基本信息编辑 Vitamio是一款 Android 与 iOS 平台上的全能多媒体开发框架,全面支持硬件解码与 GPU 渲染.从2011年8月上线到2014年1月,Vitamio 凭借其简洁易用的 ...

  6. JS触发ASP.NET服务器端控件的方法

    <asp:Button ID="Button_regId" runat="server" Font-Bold="False" OnCl ...

  7. [Everyday Mathematics]20150203

    设 $f$ 在 $\bbR$ 上连续可导, 且 $\dps{f'\sex{\frac{1}{2}}=0}$. 试证: $$\bex \exists\ \xi\in \sex{0,\frac{1}{2} ...

  8. 1048 图的宽度优先遍历序列 c语言

    描述 图(graph)是数据结构 G=(V,E),其中V是G中结点的有限非空集合,结点的偶对称为边(edge):E是G中边的有限集合.设V={0,1,2,……,n-1},图中的结点又称为顶点(vert ...

  9. Robotium简要学习

    Robotium是一款国外的Android自动化测试框架,主要针对Android平台的应用进行黑盒自动化测试,它提供了模拟各种手势操作(点击.长按.滑动等).查找和断言机制的API,能够对各种控件进行 ...

  10. C++的笔记学习第一篇,认识C++

    在一个类中包含两种成员: 数据和函数,分别称为C++数据成员和成员函数. 关于类: 类是C++新增加的重要数据类型,有了类,就就可以实现面向对象程序设计方法中的封装.信息隐蔽.继承.派生.多态等功能. ...