Sabit mesaj çubuğu, web uygulamasındaki klavye ile çok yükseğe çıkıyor

Question

Uyarlanabilir bir web uygulamasına sahibim. Yerel mobil uygulamalarda yaygın olarak bulunan mesaj çubuğunu taklit etmeye çalışıyordum. Ancak, alt tarafta sabitlenecek mesaj çubuğuna sahip olmama rağmen, mesaj çubuğu çok yüksek açılır ve klavye belirdiğinde sabitlenmez.

Aşağıdaki iki resim, nasıl başladığını ve ikincisinin nasıl yukarı fırlayacağını gösterir.

başlatıldığında Nasıl:

o

Uygulama Ruby ise klavye ile yukarı atlar nasıl. İleti formu şu şekildedir: İleti yazarken iletiyi genişletmek için kullanıyorum jquery İşte size verilen jquery'dür. Ben o alt sopa yapmak konusunda tavsiye sırayla kullanıyorum göstermek için önemli olduğunu düşünüyorum:

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

SUKDÖ'nün

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

Herhangi bir tavsiye? Teşekkürler.

Answer 1

Bu bilinen bir hataysa, bu sorunu oluşturan her aygıt için geçici bir çözümleme deneyebilirsiniz.

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

});