iframe form inside bootstrap modal jump on keypres

2019-05-31 14:59发布

站内文章 / 移动开发
36 0 0

问题:

I have embedded an iframe form inside bootstrap modal. When I keypress form input on iPhone ( both Safari and Chrome ), the page jumps and goes up. I have already disabled focus zoom by using meta viewport and font size 16px. If I don't disable zoom, the page will jump on input focus.

  • Bootstrap versin 3.3.7
  • jQuery version 3.1.1
  • iPhone 6
  • iOS version 10.2.1

The attached snippet will work because it is not in iframe. It happens when the form is in iframe.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0">
    <title>Bootstrap 101 Template</title>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <style type="text/css">
      input,
      textarea,
      select {
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Hello, world!</h1>

      <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        Launch demo modal
      </button>
    </div>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <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" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            <!-- This is how I embed iframe in modal -->
            <!-- <iframe src="form.html"></iframe> -->
            <!-- The following form will show from iframe -->
            
        <form>
          <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
          </div>
          <div class="form-group">
            <label for="exampleInputFile">File input</label>
            <input type="file" id="exampleInputFile">
            <p class="help-block">Example block-level help text here.</p>
          </div>
          <div class="form-group">
            <select class="form-control">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
          </div>
          <div class="form-group">
            <textarea class="form-control" rows="3"></textarea>
          </div>
          <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
          </div>
          <div class="checkbox">
            <label>
              <input type="checkbox"> Check me out
            </label>
          </div>
          <div class="form-group has-success">
            <label class="control-label" for="inputSuccess1">Input with success</label>
            <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
            <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
          </div>
          <div class="form-group has-warning">
            <label class="control-label" for="inputWarning1">Input with warning</label>
            <input type="text" class="form-control" id="inputWarning1">
          </div>
          <div class="form-group has-error">
            <label class="control-label" for="inputError1">Input with error</label>
            <input type="text" class="form-control" id="inputError1">
          </div>
          <div class="has-success">
            <div class="checkbox">
              <label>
                <input type="checkbox" id="checkboxSuccess" value="option1">
                Checkbox with success
              </label>
            </div>
          </div>
          <div class="has-warning">
            <div class="checkbox">
              <label>
                <input type="checkbox" id="checkboxWarning" value="option1">
                Checkbox with warning
              </label>
            </div>
          </div>
          <div class="has-error">
            <div class="checkbox">
              <label>
                <input type="checkbox" id="checkboxError" value="option1">
                Checkbox with error
              </label>
            </div>
          </div>
          <div class="form-group">
            <button type="submit" class="btn btn-default">Submit</button>
          </div>
        </form>
        <!-- iframe form end -->
          </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>
      </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>

标签： iphone forms twitter-bootstrap iframe bootstrap-modal
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~