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

Posted

技术标签:

【中文标题】iOS - 当复选框关闭键盘时固定标题位置移动【英文标题】:iOS - Fixed Header Position Shifts When Checkbox Closes Keyboard 【发布时间】:2014-02-18 14:56:07 【问题描述】:

我注意到与我的问题类似的其他问答字符串,但是没有完全相同的问题也没有解决我的确切问题。

我有一个文本区域,其下方是 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')
)

【问题讨论】:

好了,+5 代表。另外,请添加您的代码的最小工作示例,以说明问题。 谢谢 Cerbrus... 是不是更能说明问题? 【参考方案1】:

这个问题似乎与当键盘出现时 iOS 如何处理固定位置的元素有关。似乎 iOS 使固定位置的元素绝对定位并应用计算的坐标,这样它就会出现在同一个位置。

您可以在带有表单的页面(例如,帐单地址页面)上的固定标题的情况下看到这一点。如果您点击较低的字段以访问键盘,然后向上滚动页面,则固定的标题会挂在那里,遮盖了某些表单...

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

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

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

setTimeout 是必需的,因为我认为在您将其重新提交之前,它会强制页面重新定位自身的足够延迟。在没有setTimeout 的情况下尝试修复对我来说根本不起作用。

【讨论】:

感谢 Rob 的反馈。我前段时间完成了这个项目,但请记住解决方案必须是某种解决方法才能解决问题。 感谢@rob的帮助

以上是关于iOS - 当复选框关闭键盘时固定标题位置移动的主要内容,如果未能解决你的问题,请参考以下文章

如果显示键盘,iOS HTML 复选框屏幕将被阻止

iOS - 隐藏在键盘后面的 UIView 容器

C#Windows窗体 - 调整窗体大小时移动元素

使上一个/下一个按钮适用于 iOS 上的复选框

选中角度复选框时无法关闭模式

单击以选中复选框时避免关闭下拉菜单