固定的消息欄在Web應用程序中彈出時鍵盤過高

Question

我有一個自適應Web應用程序。我試圖模仿原生移動應用程序中常見的消息欄。但是，即使我已將消息欄設置爲固定在底部，但消息欄彈出的高度太高，並且在鍵盤出現時變得不固定。

下面的兩張圖片展示了它是如何開始的，第二張展示了它如何跳躍。

它是如何開始：

如何它跳到了鍵盤

應用是紅寶石。這裏是消息的形式：

<%= form_for(@message) do |f| %> 
    <%= f.text_area :body, placeholder: "Write a message...", class: "message-box", required: true %> 
    <%= f.hidden_field :match_id, value: @match.id %> 
    <%= f.submit "Send", 
    id: "send-message", 
    data: { disable_with: "Loading..." } 
    %> 
<% end %> 

這裏是我用來擴大消息，而你鍵入的jQuery。我想展現我在用，以便諮詢如何讓它粘在底部是很重要的：

var span = $('<span>').css('display','inline-block') 
         .css('word-break','break-all') 
         .appendTo('body').css('visibility','hidden'); 

function initSpan(textarea){ 
    span.text(textarea.text()) 
     .width(textarea.width()) 
     .css('font', textarea.css('font')); 
} 

$('.message-box').on({ 
    input: function(){ 
     var text = $(this).val();  
     span.text(text); 
     $(this).height(text ? span.height() : '30px'); 
    }, 
    focus: function(){   
     initSpan($(this)); 
    }, 
    keypress: function(e){ 
     if(e.which == 13) e.preventDefault(); 
    } 
}); 

SASS

form{ 
    background-color: #f5f5f5; 
    bottom: 0; 
    border-left: none; 
    border-right: none; 
    border-bottom: none; 
    border-top: 1px solid #d1d1d1; 
    float: none; 
    height: auto; 
    margin: 0; 
    padding: 0; 
    position: fixed !important; 
    width: 100%; 
    z-index: 5; 
    #message_body{ 
     background-color: $white; 
     border: 1px solid #d1d1d1; 
     border-radius: 10px; 
     bottom: 7px; 
     color: $dark_blue; 
     float: none; 
     font-size: 16px; 
     font-weight: 400; 
     height:25px; 
     left: 10px; 
     line-height: 20px; 
     margin: 8px 0 0 10px; 
     resize:none; 
     overflow:hidden; 
     padding: 5px 0 0 5px; 
     width: 75%; 
    } 
    #send-message{ 
     background-color: #f5f5f5; 
     border: none; 
     bottom: 0; 
     color: $dark_blue; 
     height: 43px; 
     float: none; 
     font-size: 16px; 
     font-weight: 600; 
     line-height: 0; 
     margin: 0; 
     right: 10px; 
     padding: 0; 
     position: fixed; 
     width: auto; 
    } 
    textarea{ 
     &::-webkit-input-placeholder { 
     font-size: 16px; 
     line-height: 16px; 
     padding: 3px 0 0 5px; 
     } 
     &::-moz-placeholder { 
     font-size: 16px; 
     line-height: 16px; 
     padding: 3px 0 0 5px; 
     } 

     &:-ms-input-placeholder { 
     font-size: 16px; 
     line-height: 16px; 
     padding: 3px 0 0 5px; 
     } 

     &:-moz-placeholder { 
     font-size: 16px; 
     line-height: 16px; 
     padding: 3px 0 0 5px; 
     } 
    } 
    } 

有什麼建議？謝謝。

Answer 1

如果這是一個已知的錯誤，您可以嘗試對產生此問題的每個設備進行臨時修復。

首先檢測裝置像這樣的東西

/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent) 

然後嘗試動態地改變固定位置的元素的聚焦和模糊狀態：

$('.message-box').bind('focus blur', function(e){ 

    // These are example numbers as I can't test for your situation. 
    // You might want to try margins or whatever works, as well as applying 
    // them to all the fixed elements of your form. 
    e.type == 'focus' && $(this).css('bottom','-150px'); 
    e.type == 'blur' && $(this).css('bottom','0px'); 

});