iOS -当复选框关闭键盘时固定标头位置移动

Question

我注意到了类似于我的问题的其他问题，但是没有什么是完全相同的，也没有解决我的确切问题。

我有一个文本区域，下面是两个复选框。

在iOS设备上&输入到文本字段(虚拟键盘显示)时，“固定”标头仍然处于位置，当单击键盘上的“完成”时，标题仍然保持正确。

我的问题是，一旦有人在字段中输入文本，并在此之前单击“完成”，用户将取消选中复选框。这将导致标题向下移动。

似乎文本区域到复选框的焦点/模糊性关闭了键盘，并配置了标题。

如果用户点击屏幕，它就可以返回到正确的固定位置。-再说一次，在焦点和模糊状态之间没有登记的东西。

任何帮助都将不胜感激。

谢谢,

Img 1:将文本输入到文本区域。Img 2:点击完成后输入文字-移除键盘。Img 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'})
})

Answer 1

这个问题似乎与键盘出现时iOS如何处理固定位置的元素有关.看起来，iOS使固定位置元素绝对定位，并应用计算出的坐标，使其看起来处于相同的位置。

在带有表单的页面上的固定头(例如，计费地址页)中，您可以看到这一点。如果您点击一个较低的字段访问键盘，然后滚动回页，固定的标题挂在那里，模糊了一些形式.

在这种情况下，似乎还有另一个问题在起作用，那就是当用户立即从键盘输入(文本、文本区域、电子邮件等)聚焦时。在复选框中，固定定位元素不会丢失它的伪绝对位置。不确定这是否是iOS中的一个bug或什么的，但这肯定是呈现不一致。

我的解决办法是强制重新绘制页面(jQuery)：

$('[type="checkbox"]').on('click', function() {
    window.setTimeout(function() {
        $(window).scrollTop($(window).scrollTop());
    }, 20);
});

setTimeout是必需的，因为我认为它会造成足够的延迟，使页面在将其退回提交之前重新定位。在没有setTimeout的情况下尝试修复，对我一点也不管用。