键盘出现时如何向上移动文本字段

Question

在我的网站文本字段中，当默认的Android键盘出现时没有关注。它隐藏了文本框。这个问题的任何简单解决方案。

Answer 1

会有位置：固定属性（在与文本字段相关的div中），这会阻止文本字段跳起来...只是禁用位置属性...我遇到了同样的问题

Answer 2

这是在虚拟键盘出现时向上和向下滚动页面的基本代码

JsFiddle Demo

<强>的jQuery

var keyboardHeight = 150;

$(document).ready(function() {
    $("textarea, input").focusin(function() {
        var element = $(this);
        var viewportHeight = $(window).height();
        var windowScrollTop = $(window).scrollTop();
        var offsetTop = element.offset().top - windowScrollTop;
        var validOffset = viewportHeight - keyboardHeight;

        $("#keyboard").fadeIn();

        if(offsetTop <= 0) {
            $('html, body').animate({
                scrollTop: windowScrollTop + offsetTop
            }, 1000);
        }
        else {
          if(viewportHeight > keyboardHeight) {
            if(offsetTop > validOffset) {
              $('html, body').animate({
                scrollTop: windowScrollTop + offsetTop
              }, 1000);
            }
          }
        }
    });

    $("textarea, input").focusout(function() {
        $("#keyboard").fadeOut();
    });
});

<强> HTML

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<textarea rows="11"></textarea>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<div id="keyboard"></div>

<强> CSS

body {
  background: transparent;
  padding-bottom: 150px; /* height of virtual keyboard */
}

textarea {
  width: 100%;
  background: transparent;
  border: solid 1px red;
  border-radius: 10px;
  color: white;
  outline: none;
}

#keyboard {
  position: fixed;
  width: 100%;
  height: 150px;
  left: 0;
  bottom: 0;
  background: rgba(13, 13, 13, 0.5);
  display: none;
}