防止Android键盘推动布局

Question

防止Android键盘推动布局

androidhtmlcsstwitter-bootstraptextarea

10

我使用Bootstrap、CSS和HTML创建了一个表单。

但是，当我在Android手机上点击文本区域（也就是获得焦点时），文本区域的下半部分会变成白色。

我不明白为什么它会变成白色。顺便说一句：在PC上它运行得很好。

下半部分是白色

我的CSS代码：

    .container-fluid{
       background-color: #EF4247;
     border-color: #EF4247;
     }
form {
            height: 100%;
        width: 100%;
        padding: 50;
           background-color: #EF4247;
     border-color: #EF4247;
    text-align: center;

    margin: 0;
    }


h1{
text-align:center;
}

textarea{ width:200px;
}

.form-horizontal .control-group {
  margin-bottom: 20px;
}

我的HTML代码：

    <html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="style1.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">


     </head>
<body>
<div class="container-fluid">
<h1>SEND ME SOME MAIL</h1>
<form class="form-horizontal" action="mail.php" method="post" >
  <div class="control-group">
    <label class="control-label" for="inputEmail">Email</label>
    <div class="controls">
      <input type="text" id="inputEmail" placeholder="Email" name="subject">
    </div>
  </div>
  <div class="control-group">
  <label class="control-label" for="textarea">Text Area</label>
  <div class="controls">                     
    <textarea id="textarea"  rows="10" name="message" placeholder="Enter your message here:"></textarea>
  </div>
</div>
<button type="submit" class="btn">Submit</button>

</form>


 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="fitter-happier-text.js"></script>
    <script type="text/javascript"></script>
    </div>
</body>
</html>

- Prasanth Louis

你能否将背景色放在页面主体上而不是表单上？如果可以的话，那么这可能是一个解决方法。 - Le-roy Staines

3个回答

1

我知道这是一篇很旧的帖子，但无论如何，以下是你可以做的。

body {
  position: absolute;
}

- James Norman

0

我延迟了焦点：

// If the form has the focus the keyboard moves the layout
setTimeout(() => this.focus(0), 1000);

- Manuel García Criado

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Le-roy Staines · Accepted Answer

我认为这个例子的根本问题是，引导式 container-fluid CSS 样式的行为似乎与您在移动设备上期望的效果不兼容。

我的建议是用一个新的块元素对表单进行封装，并在该元素上设置背景。然后在这个新的块容器、<html> 和 <body> 元素上设置min-height:100%。

类似于这样：

html, body {
  min-height:100%;height:100%;
}
.red-background-not-on-body-or-html {
  background-color: #EF4247;    
  min-height:100%;
}

And html like this:

<body>
  <div class="red-background-not-on-body-or-html">
     <div class="container-fluid">
        <!-- FORM HERE -->
     </div>
  </div>
</body>

就你的示例而言，你也可以将background-color属性放在<body>或<html>标签本身上。

否则，如果您仍然要求背景遵守.container-fluid CSS逻辑，那么您可以尝试使用针对手持设备的媒体查询进行黑客攻击，但可能会变得混乱。

您还可以尝试重新排列，以使表单位于流体逻辑之外，然后向表单添加min-height:100%。 JSBin演示。