[英]iOS - Fixed Header Position Shifts When Checkbox Closes Keyboard
我注意到其他与我的问题类似的“问答”字符串,但是没有完全相同的问题,也没有解决我的确切问题。
我有一个文本区域,下面是2个复选框。
在iOS设备上并输入文本字段(显示虚拟键盘)时,“固定”标题保留在原位置,而在键盘上单击“完成”时,标题仍保留在原处。
我的问题是,一旦有人在该字段中输入了文本,并且在单击完成之前,用户便取消了一个复选框。 这导致标题向下移动。
文本框的焦点突出显示/模糊似乎关闭了键盘并放置了标题。
然后,如果用户点击屏幕,它可以返回到正确的固定位置。 -同样,在聚焦和模糊状态之间没有出现某些现象。
任何帮助将不胜感激。
谢谢,
图1:在文本区域中输入文本。 图2:在输入文字后单击完成-卸下键盘。 图3:在文本区域中输入文本,然后取消选中复选框-移开键盘并“移动”标题位置。
HTML:
<div class="tweet-inputs">
<textarea name="tweet" class="tweet-field" placeholder="Share your thoughts..." maxlength="140" ng-model="tweetStatus"></textarea>
</div>
<div class="clearfix">
<div class="check">
<input type="checkbox" value=" "name="auto-tag" ng-model="autoHash"/>Auto Hashtag #MakeDid
<input type="checkbox" value=" "name="auto-tag" ng-model="autoHash2"/>Auto Hashtag #DesignIndaba
</div>
<a value="POST" class="tweet-btn nav-btn" ng-click="sendTweet(tweetStatus, autoHash, autoHash2, replyOn)">POST</a><span class="spinning"></span>
</div>
CSS:
.header-wrapper {
background: #7a7575;
z-index: 99;
box-shadow: none;
text-align: center;
color: white;
height: 75px;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
JS(我已经收录了,但似乎没有用):
$('input[type="checkbox"]').on('focus', function(){
$('header-wrapper').css({position:'absolute', top: '0'})
$(window).scrollTop(0)
})
$('input[type="checkbox"]').on('blur', function(){
$('header-wrapper').css({position:'fixed'})
})
该问题似乎与出现键盘时iOS如何处理固定位置的元素有关。 看来iOS使固定位置的元素绝对定位并应用计算出的坐标,使得它看起来像在同一位置。
在带有表单的页面(例如,帐单邮寄地址页面)上固定标题的情况下,您会看到此信息。 如果您点击下面的字段来访问键盘,然后向后滚动页面,则固定的标题会在那里悬挂,从而使某些表格变得晦涩...
在这种情况下,似乎还有另一个问题在起作用,那就是用户立即将焦点从键盘输入(文本,文本区域,电子邮件等)集中到复选框,从而固定位置的元素不会失去它的人造绝对值。位置。 不知道这是iOS中的错误还是什么,但这肯定是渲染不一致。
我的解决方法是强制重新绘制页面(jQuery):
$('[type="checkbox"]').on('click', function() {
window.setTimeout(function() {
$(window).scrollTop($(window).scrollTop());
}, 20);
});
setTimeout
是必需的,因为我认为它会迫使页面重新定位,然后再将其踢回到提交之前。 在没有setTimeout
的情况下尝试修复根本不适合我。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.