iOS-復選框關閉鍵盤時固定標題位置移動

Question

我注意到其他與我的問題類似的“問答”字符串，但是沒有完全相同的問題，也沒有解決我的確切問題。

我有一個文本區域，下面是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'})
})

Answer 1

該問題似乎與出現鍵盤時iOS如何處理固定位置的元素有關。 看來iOS使固定位置的元素絕對定位並應用計算出的坐標，使得它看起來像在同一位置。

在帶有表單的頁面（例如，帳單郵寄地址頁面）上固定標題的情況下，您會看到此信息。 如果您點擊下面的字段來訪問鍵盤，然后向后滾動頁面，則固定的標題會在那里懸掛，從而使某些表格變得晦澀...

在這種情況下，似乎還有另一個問題在起作用，那就是用戶立即將焦點從鍵盤輸入（文本，文本區域，電子郵件等）集中到復選框，從而固定位置的元素不會失去它的人造絕對值。位置。 不知道這是iOS中的錯誤還是什么，但這肯定是渲染不一致。

我的解決方法是強制重新繪制頁面（jQuery）：

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

setTimeout是必需的，因為我認為它會迫使頁面重新定位，然后再將其踢回到提交之前。 在沒有setTimeout的情況下嘗試修復根本不適合我。