[英]iOS - Fixed Header Position Shifts When Checkbox Closes Keyboard
I have noted other Q & A strings similar to my problem, however nothing quite the same nor resolving my exact issue. 我注意到其他与我的问题类似的“问答”字符串,但是没有完全相同的问题,也没有解决我的确切问题。
I have a text area and beneath that are 2 checkboxes. 我有一个文本区域,下面是2个复选框。
When on an iOS device & inputting to the text field (the virtual keyboard displays), the 'fixed' header remains in place, and when clicking 'Done' on the keyboard the header still remains in place correctly. 在iOS设备上并输入文本字段(显示虚拟键盘)时,“固定”标题保留在原位置,而在键盘上单击“完成”时,标题仍保留在原处。
My issue is once someone has entered text into the field and prior clicking done, the user unchecks a checkbox. 我的问题是,一旦有人在该字段中输入了文本,并且在单击完成之前,用户便取消了一个复选框。 This causes the header to shift down.
这导致标题向下移动。
It seems as though the focusout/blur of the text area to the checkbox closes the keyboard and dispositions the header. 文本框的焦点突出显示/模糊似乎关闭了键盘并放置了标题。
It then can return to the correct fixed position if the user taps the screen. 然后,如果用户点击屏幕,它可以返回到正确的固定位置。 - Again, something not registering with the in between states of focus & blur.
-同样,在聚焦和模糊状态之间没有出现某些现象。
Any help would much be appreciated. 任何帮助将不胜感激。
Thanks, 谢谢,
Img 1: Entering text into the text area. 图1:在文本区域中输入文本。 Img 2: Clicking done post inputting text - removing the keyboard.
图2:在输入文字后单击完成-卸下键盘。 Img 3: Entering text into the text area, then unchecking a checkbox - removing the keyboard & 'shifting' the header's position.
图3:在文本区域中输入文本,然后取消选中复选框-移开键盘并“移动”标题位置。
HTML: 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: 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 (I've included but doesn't seem to work): 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'})
})
The issue appears to be related to how iOS handles fixed-positioned elements when the keyboard appears. 该问题似乎与出现键盘时iOS如何处理固定位置的元素有关。 It seems that iOS makes fixed-position elements absolutely positioned and applies calculated coordinates such that it would APPEAR to be in the same place.
看来iOS使固定位置的元素绝对定位并应用计算出的坐标,使得它看起来像在同一位置。
You can see this in the case of a fixed header on a page with a form (eg., a billing address page). 在带有表单的页面(例如,帐单邮寄地址页面)上固定标题的情况下,您会看到此信息。 If you tap into a lower field to access the keyboard and then scroll back up the page, the fixed header is hanging out there, obscuring some of the form...
如果您点击下面的字段来访问键盘,然后向后滚动页面,则固定的标题会在那里悬挂,从而使某些表格变得晦涩...
It looks like there's another issue at play in this case, and that's when the user immediately focuses from a keyboard input (text, text area, email, etc.) to a checkbox, whereby the fixed positioned element doesn't lose it's faux absolute position. 在这种情况下,似乎还有另一个问题在起作用,那就是用户立即将焦点从键盘输入(文本,文本区域,电子邮件等)集中到复选框,从而固定位置的元素不会失去它的人造绝对值。位置。 Not sure if that's a bug in iOS or what, but it certainly is a rendering inconsistency.
不知道这是iOS中的错误还是什么,但这肯定是渲染不一致。
My workaround for this is to force a re-draw of the page (jQuery): 我的解决方法是强制重新绘制页面(jQuery):
$('[type="checkbox"]').on('click', function() {
window.setTimeout(function() {
$(window).scrollTop($(window).scrollTop());
}, 20);
});
The setTimeout
is required, as I think it forces enough of a delay for the page to reposition itself before you kick it back into submission. setTimeout
是必需的,因为我认为它会迫使页面重新定位,然后再将其踢回到提交之前。 Trying the fix without setTimeout
didn't work for me at all. 在没有
setTimeout
的情况下尝试修复根本不适合我。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.