Question

我已经注意到其他Q＆amp;一个类似于我的问题的字符串，但没有完全相同，也没有解决我的确切问题。

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

在iOS设备上播放时输入到文本字段（虚拟键盘显示），“固定”标题保持不变，当点击键盘上的“完成”时，标题仍然保持正确。

我的问题是，当有人在字段中输入文字并且在点击完成之前，用户取消选中一个复选框。这会导致标题向下移动。

似乎复选框的文本区域的焦点/模糊会关闭键盘并处理标题。

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

任何帮助都将不胜感激。

谢谢，

图1：在文本区域输入文本。图2：点击完成后输入文本 - 删除键盘。图3：在文本区域输入文本，然后取消选中复选框 - 删除键盘＆amp; '移动'标题的位置。

header shift issue iOS

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中的错误还是什么，但它肯定是渲染不一致。

我的解决方法是强制重新绘制页面（jQuery）：

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

setTimeout是必需的，因为我认为它会强制延迟页面重新定位，然后再将其重新提交。在没有setTimeout的情况下尝试修复根本不适用于我。

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

1 个答案: