fixed 定位苹果手机输入框触发时内容全部隐藏

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

转载于:https://www.cnblogs.com/qiao20/p/5713742.html

fixed 定位苹果手机输入框触发时内容全部隐藏相关推荐

关于h5页面苹果手机使用fixed定位tabbar最底部时遮挡内容问题
在使用uni-app时,自己写了个底部tabbar导航栏,出现了tabbar遮挡内容的问题,如下图所示: 刚开始的时候,使用了顶部盒子padding-bottom 来时底部盒子撑开,在chrome浏览 ...
苹果14键盘遮挡fixed定位的输入框等元素
描述如下css, 苹果 14 手机,当键盘弹起时,会遮挡住 bottom-box 这个元素: .bottom-box{position:fixed;bottom:0;left:0;right:0; ...
苹果手机输入框聚焦时右侧或下方出现线条解决方法
苹果手机input框设置了border:none,当聚焦时右侧或下方出现了线条,解决方法:将 border:none 改为 border:rgba(0,0,0,0) solid 1px; 也不是每个页 ...
解决微信小程序输入框聚焦时内容被上推致布局错乱
第一张是正常的未聚焦状态,第二张是滚动后聚焦,文字跑上面去了.解决:页面使用ScrollView组件,设置 overflowY:auto: minheight:100vh overflowX:hidd ...
ios fixed定位后内容不显示_记录CSS中 position:fixed 踩的坑
在 html 页面的css样式中,如果将 position 属性的值设置为 fixed,那就表示其元素的位置相当于显示设备的可视区域进行定位,而今天在调试此属性时,却发生了一件奇怪的事件. posit ...
h5 ios中软键盘弹起后 fixed定位失效
position: fixed;在ios手机中会存在一个失效情况: 如果页面有输入框存在,点击输入框软键盘弹起后会发生一个现象: 1.针对当前内容高度小于屏幕高度时: 上下滑动页面时候,发现之前fix ...
基于Fixed定位的框选功能
最近项目涉及到一个支持批量操作的小需求,交互上需要使用框选来触发.在查阅了一些资料后发现,网上的方案基本都是基于绝对定位布局的,此方案如果是针对全局(在body上)的框选,还是可用的.但是现实需求里几 ...
vue键盘抬起_vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
最近遇到了之前没有碰到过的一个问题:编辑器输入内容时,最好让内容一直保持在可视区域,比如如果区域超出的话,就在键盘抬起时向上滚动一定距离. 这个和聊天发消息还有一定的区别,聊天的话是只要点开输入框,就 ...
再谈IE6之Fixed定位
众所周产于公元2002年.且当前为我国主流的IE6浏览器是不支持CSS2的静止定位属性fixed,蛋疼的前端工程师们为此发明了各种形式的解决方案: 一.常规js解决之道这个方案最为古老,比IE6还老 ...

fixed 定位苹果手机输入框触发时内容全部隐藏

fixed 定位苹果手机输入框触发时内容全部隐藏相关推荐

最新文章

热门文章

fixed 定位 苹果手机输入框触发时内容全部隐藏

fixed 定位 苹果手机输入框触发时内容全部隐藏相关推荐

最新文章

热门文章

fixed 定位苹果手机输入框触发时内容全部隐藏

fixed 定位苹果手机输入框触发时内容全部隐藏相关推荐