Thanh thông báo cố định bật lên quá cao với bàn phím trên ứng dụng web

Question

Tôi có một ứng dụng web thích ứng. Tôi đã cố gắng bắt chước thanh thông báo thường thấy trên các ứng dụng di động gốc. Tuy nhiên, mặc dù tôi đã đặt thanh thông báo thành cố định ở dưới cùng, thanh thông báo bật lên quá cao và không bị đóng khi bàn phím xuất hiện.

Hai hình ảnh dưới đây cho thấy cách nó bắt đầu và hình ảnh thứ hai cho thấy nó nhảy lên như thế nào.

Làm thế nào nó bắt đầu:

Làm thế nào nó nhảy lên với bàn phím

Ứng dụng trong Ruby. Đây là biểu mẫu cho thông báo:

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

Đây là jquery Tôi đang sử dụng để mở rộng thư trong khi bạn nhập. Tôi nghĩ rằng điều quan trọng để hiển thị những gì tôi đang sử dụng để cho lời khuyên về việc làm thế nào để làm cho nó dính vào phía dưới:

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

Bất cứ lời khuyên? Cảm ơn.

Answer 1

Nếu đây là lỗi đã biết, bạn có thể thử khắc phục tạm thời cho từng thiết bị tạo ra sự cố này.

Đầu tiên phát hiện các thiết bị với một cái gì đó như thế này

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

Sau đó thử để tự động thay đổi vị trí cố định cho các quốc gia tập trung và mờ của nguyên tố của bạn:

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

});