Question

我在我的页面上使用简单的模态，默认的Bootstrap 3样式。

<div class="modal fade">
  <div class="modal-dialog">
        <div class="modal-content">
              <div class="modal-body">
                <form class="form-horizontal">
                      <p>Simple form</p>
                       <div class="form-group">
                            <label for="input1"><span">Old pass</span></label>
                            <input type="password" id="input1" maxlength="20">
                        </div>
                        <div class="form-group">
                            <label for="input2"><span>New pass</span></label>
                            <input type="password" id="input2" maxlength="20">
                        </div>
                        <button type="button">change pass</button>
                    </form>
                </div>
        </div>
  </div>

当输入焦点和键盘时，它是重叠的输入字段。有必要滚动表单以查看输入内容。这不好如何纠正这种形式的行为？

Answer 1

尝试将焦点设置为输入。这可能会迫使WebView滚动到“可见”视图。

$('.modal').on('shown.bs.modal', function () {
  $('#input1').focus();
})

Answer 2

嘿Mark我今天正在研究这个问题并希望提供我的解决方案。

classpath 'com.android.tools.build:gradle:2.3.0'

我正在使用MEAN堆栈应用程序，我正在操作的文件是一个EJS文件，因此您的体验可能会有所不同！希望有所帮助！这里有一些更详细的代码，它可能是一个样式的组合，但这是大部分的css文件。

  .modal{
     position: sticky;
    }

Bootstrap 3输入问题。 Android上的键盘重叠输入字段

2 个答案: