Fixed Messaging-Leiste erscheint zu hoch mit der Tastatur auf Web-Anwendung

Question

Ich habe eine adaptive Web-Anwendung. Ich habe versucht, die Meldungsleiste nachzuahmen, die häufig in nativen mobilen Anwendungen gefunden wird. Obwohl die Nachrichtenleiste am unteren Rand fest eingestellt ist, erscheint die Nachrichtenleiste zu hoch und wird nicht mehr angezeigt, wenn die Tastatur erscheint.

Die zwei Bilder unten zeigen, wie es beginnt und die zweite zeigt, wie es aufspringt.

Wie es beginnt:

Wie es springt mit Tastatur

Anwendung in Ruby ist. Hier ist das Formular für die Nachricht:

<%= 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 %> 

Hier ist die Jquery, die ich verwende, um die Nachricht während der Eingabe zu erweitern. Ich denke, es ist wichtig, zu zeigen, was ich für Ratschläge, wie um bin mit ihm auf den Boden machen kleben:

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; 
     } 
    } 
    } 

Jede Beratung? Vielen Dank.

Answer 1

Wenn dies ein bekannter Fehler ist, können Sie einen temporären Fix für jedes Gerät versuchen, das dieses Problem verursacht.

Zuerst erkennt das Gerät mit so etwas wie dieses

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

Dann versuchen Sie dynamisch die feste Position für die fokussierte und unscharfe Zustände Ihres Elements zu ändern:

$('.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'); 

});