通过移动键盘隐藏的Bootstrap模式中的表单输入

Question

我的网页也可以在移动设备中看到。 此页面显示使用 Twitter Bootstrap 构建的模态窗口，该窗口高于平均屏幕（或略低）。 在模态窗口的内容区域中，在内容区域的底部，输入字段等待用户输入代码。

问题在于，当用户点击输入字段时，虚拟键盘会隐藏输入，在您关闭键盘之前无法看到您在那里写的内容。

我希望滚动模态窗口以显示该字段。

你有类似的问题吗？你是怎么解决的？

HTML

<div class="container">
  <h1>Title</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos illum eum expedita enim culpa natus qui soluta eaque, error perspiciatis, doloribus, eius? Rerum, placeat sint temporibus voluptatum ad quasi consequuntur!</p>
</div>
<div id="myModal" class="modal active" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus iure quos nam veritatis, qui fugiat at magnam vel recusandae odit tempore, quas repudiandae? Placeat, non! Laboriosam quidem maxime nisi mollitia!</p>
        <p>
          <input class="form-control" type="text" name="field" />
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

jsFiddle示例：https://jsfiddle.net/sxgjy2de/

SCREENSHOT