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

    简述 在分享所有基础知识之前,很有必要在这里介绍下常用的窗口 - QWidget.QDialog.QMainWindow. QWidget继承于QObject和QPaintDevice,QDialog ...

  2. Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法,绑定,each循环,ajax获取json数据

    jquery.tmpl.js 是一个模板js  ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...

  3. fiddler2抓包工具使用图文教程

    fiddler2抓包工具使用图文教程 三.fiddler实用功能使用说明: 1.fiddler捕获浏览器的会话: 能支持http代理的任意程序都能被fiddler捕获到,由于fiddler的运行机制就 ...

  4. HDU 5285 wyh2000 and pupil (二分图着色)

    题意: 共有n个小学生,编号为1−n.将所有小学生分成2组,每组都至少有1个人.但是有些小学生之间并不认识,而且如果a不认识b,那么b也不认识a.Wyh2000希望每组中的小学生都互相认识.而且第一组 ...

  5. Builder模式在Java中的应用(转)

    在设计模式中对Builder模式的定义是用于构建复杂对象的一种模式,所构建的对象往往需要多步初始化或赋值才能完成.那么,在实际的开发过程中,我们哪些地方适合用到Builder模式呢?其中使用Build ...

  6. C语言中strcpy(char *strDest, const char *strScr)字符串复制库函数的理解与分析

    1.原版的strcpy()函数原型 char * strcpy( char *strDest, const char *strSrc ) { assert( (strDest != NULL) &am ...

  7. wav文件格式分析详解

    wav文件格式分析详解 文章转载自:http://blog.csdn.net/BlueSoal/article/details/932395 一.综述    WAVE文件作为多媒体中使用的声波文件格式 ...

  8. zoj 2027 Travelling Fee

    // 题意 : 一个人要去旅行 给你起点和终点 求最少花费 其中花费为经过路径的总费用减去该路径的中的最大花费段// 直接搜索 稍微加了个剪枝 主要是数据规模小#include <iostrea ...

  9. Android 使用库项目时的一个特殊tip

    前提: 项目A作为库项目被项目B引用,但是项目A中有自定义的控件和自定义的属性,当在项目B中使用自定义的属性时,编译时就会直接报错:No resource identifier found for a ...

  10. 【剑指offer 面试题14】调整数组顺序使奇数位于偶数前面

    思路: 头尾指针,向中间遍历,依据条件交换元素. #include <iostream> using namespace std; void reOrder(int *pData, uns ...