無法在Chrome移動設備上輸入表單數據

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行動的虛擬鍵盤很可能與你的表單項目的定位發生衝突固定沖洗到底部。

當將元素固定到底部時，會有很多線程指出錯誤行爲。你應該把表格移到其他地方。