Исправленная панель сообщений слишком высока с клавиатурой в веб-приложении

Question

У меня есть адаптивное веб-приложение. Я пытался подражать панели сообщений, обычно встречающейся в мобильных приложениях. Однако, хотя у меня есть панель сообщений, установленная на фиксированную внизу, панель сообщений слишком высока и становится незафиксированной при появлении клавиатуры.

На двух рисунках ниже показано, как он начинается, а второй показывает, как он вскакивает.

Как это начинается:

Как он прыгает с клавиатуры

Применение в Ruby. Вот эта форма для сообщения:

Вот 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'); 

});