使用Web应用程序上的键盘固定消息栏弹出太高

Question

我有一个自适应Web应用程序.我试图模仿本机移动应用程序中常见的消息栏.但是,即使我将消息栏设置为固定在底部,消息栏也会弹出太高而在键盘出现时变得不固定.

下面的两张图片显示了它是如何开始的,第二张图片显示了它是如何跳起来的.

它如何开始:

如何用键盘跳起来

应用程序在Ruby中.这是消息的表单:

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

这是我用来在你输入时展开消息的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();
    }
});

上海社会科学院

  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');

});