La barra di messaggistica fissa appare troppo alta con la tastiera sull'applicazione Web

Question

Ho un'applicazione Web adattiva. Stavo tentando di simulare la barra dei messaggi che si trova comunemente nelle applicazioni mobili native. Tuttavia, anche se la barra dei messaggi è impostata su fisso in basso, la barra dei messaggi appare troppo alta e diventa non fissata quando appare la tastiera.

Le due immagini seguenti mostrano come inizia e la seconda mostra come salta.

come inizia:

Come salta su con la tastiera

L'applicazione è in Ruby. Ecco il modulo per il messaggio:

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

Ecco il jquery che sto usando per espandere il messaggio durante la digitazione. Penso che sia importante mostrare quello che sto usando in modo per consigli su come farlo aderire al fondo:

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

Qualche consiglio? Grazie.

Answer 1

Se si tratta di un bug noto, è possibile provare una correzione temporanea per ciascun dispositivo che produce questo problema.

Prima rileva il dispositivo con qualcosa di simile

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

Poi cercare di cambiare dinamicamente la posizione fissa per gli stati mirati e sfocati di vostro elemento:

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

});