无法在 chrome mobile 上输入表单数据

Question

我正在开发一个移动优先的 web 应用程序（Ruby on Rails 3 w/ Zurb Foundation 5），它在屏幕底部有一个包含三个部分的表单：

• 文件上传按钮
• 文本输入字段
• 提交按钮

在使用谷歌浏览器时，我在尝试使用文本输入字段时遇到错误。

• 在 iOS 上，虚拟键盘会弹出，但在上面输入什么也不会。用户必须再次单击文本字段才能使该字段成为焦点
• 在 Android 上，情况更糟：单击后键盘会弹出，然后再次滑开。同时光标在文本字段中闪烁。

这里是代码，任何帮助将不胜感激。

<form accept-charset="UTF-8" action="/posts" class="new_post" enctype="multipart/form-data" id="new_post" method="post">
    <div style="margin:0;padding:0;display:inline">
        <input name="utf8" type="hidden" value="&#x2713;" />
        <input name="authenticity_token" type="hidden" value="i9+Pjr1hPjTH8/MzPI0Y4+o0qYvS+C/GJcOR5wht7nQ=" />
    </div>
    <div class="row collapse action">
        <div class="small-2 columns">
            <input id="post_pic" name="post[pic]" type="file" />
        </div>
        <div class="small-8 columns">
            <input id="post_message" name="post[message]" placeholder="What&#x27;s going on?" size="30" type="text" />
        </div>
        <div class="small-2 columns">
            <input class="postfix radius button action-post" name="commit" type="submit" value="Post" />
        </div>
    </div>

</form>

编辑：找到导致问题的 CSS 类，但还不知道如何解决它：

.action {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    padding-top: 20px;
}

Answer 1

Chrome 移动版的虚拟键盘可能与您的表单项的位置发生冲突，这些表单项是固定在底部齐平的。

当修复元素齐平到底部时，有很多线程说明错误行为。你应该把表格移到别处。