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

我正在使用移動第一個Web應用程序（Ruby on Rails 3 w/Zurb Foundation 5），它具有三部分屏幕底部的表單：無法在Chrome移動設備上輸入表單數據

文件上傳按鈕
文本輸入字段
提交按鈕

在使用谷歌瀏覽器，我遇到的錯誤，當我嘗試使用文本輸入字段。

在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; 
}

來源

2014-01-16 erdostom

忘了提及在桌面瀏覽器或Safari上沒有錯誤 – erdostom

Chrome行動的虛擬鍵盤很可能與你的表單項目的定位發生衝突固定沖洗到底部。

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

來源

2014-01-16 22:07:19

謝謝，希望有其他的東西，但工作！ – erdostom

謝謝！當表單沒有提交時，按鈕太低。我在表單上設置了較低的高度，並且按鈕上升。只需查看其中的一小部分，但提交工作又開始了。 –

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

回答

相關問題