帶預填的HTML表單不會在Chrome中提交

我的代碼適用於所有主流瀏覽器，除了Google Chrome之外，它的表現很奇怪。我正在使用Google Chrome 11.0.696.68。這些事實適用於Chrome：帶預填的HTML表單不會在Chrome中提交

如果我給所有輸入字段賦值，我可以毫無困難地提交表單。
如果我將字段'day'留空並按下提交按鈕，則表單未提交，但由於某種原因焦點轉到了日期字段。
如果我將焦點放在「日」以外的任何字段中，例如'other'，然後按回車鍵，表單不會被提交，焦點會再次轉到日期字段。
如果我將焦點放在空白字段並按回車，表單將被提交。
如果我註釋掉行prefillTextfield('candidate_dateOfBirth_day', 'Day');，一切工作正常。奇怪的是，仍然有一個類似的領域，不會造成任何問題：一年。

這是谷歌瀏覽器中的錯誤，還是在我的代碼中？

<html> 
     <head> 
     <title>Submit fails in Google Chrome</title> 
     <script type="text/javascript" src="hidden/js/jquery-1.4.2.min.js"></script> 
     <script type="text/javascript"> 
      /** 
      * Prefill a textfield 
      */ 
      function prefillTextfield(id, defaultText) 
      { 
       var element = $('#' + id); 
       var color = 'rgb(153, 153, 153)'; 

       // Define focus event 
       element.focus(
       function() 
       { 
        if(element.css('color') == color) 
        { 
        element.val(''); 
        element.css({ 'color': '#000' }); 
        } 
       } 
      ); 

       // Define blur event 
       element.blur(
       function() 
       { 
        if(element.val().length == 0) 
        { 
        element.val(defaultText); 
        element.css({ 'color': color }); 
        } 
       } 
      ); 

       // Simulate onblur event. 
       element.trigger('blur'); 
      } 

      $(document).ready( 
       function() 
       { 
       prefillTextfield('candidate_dateOfBirth_day', 'Day'); 
       prefillTextfield('candidate_dateOfBirth_year', 'Year'); 
       } 
      ); 
     </script> 
     </head> 

     <body> 
     <form onsubmit="javascript: alert('Submitted!'); return false;"> 
      <div class="formField"> 
      <label name="dateOfBirth-label">Date of birth</label> 
      <input type="text" class="textField" id="candidate_dateOfBirth_day" name="candidate_dateOfBirth_day" maxlength="2" style="width: 60px;" /> 
      <select id="candidate_dateOfBirth_month" name="candidate_dateOfBirth_month" style="width: 90px; color: #999;"> 
       <option value="" style="color: #999;">Month</option> 
       <option value="01" style="color: #000;">January</option> 
       <option value="02" style="color: #000;">February</option> 
       <option value="03" style="color: #000;">March</option> 
       <option value="04" style="color: #000;">April</option> 
       <option value="05" style="color: #000;">May</option> 
       <option value="06" style="color: #000;">June</option> 
       <option value="07" style="color: #000;">July</option> 
       <option value="08" style="color: #000;">August</option> 
       <option value="09" style="color: #000;">September</option> 
       <option value="10" style="color: #000;">October</option> 
       <option value="11" style="color: #000;">November</option> 
       <option value="12" style="color: #000;">December</option> 
      </select> 
      <input type="text" class="textField" id="candidate_dateOfBirth_year" name="candidate_dateOfBirth_year" maxlength="4" style="width: 60px;" /> 
      </div> 
      <div class="formField"> 
      <label name="dateOfBirth-label">Other input field</label> 
      <input type="text" class="textField" id="other" name="other" style="width: 60px;" /> 
      </div> 
      <div class="formField"> 
      <label name="dateOfBirth-label">&nbsp;</label> 
      <input type="submit" class="textField" value="Submit" /> 
      </div> 
     </form> 
     </body> 
    </html>

在此先感謝！

的jsfiddle - here

來源

2011-05-20 dbroeks

您不必使用'的JavaScript：'標籤 – epascarello 2011-05-20 13:40:50

我使用鉻11，它似乎工作： http://jsfiddle.net/maniator/WtcX7/您的小提琴 – Neal 2011-05-20 14:30:58

我已經在4臺電腦上測試過，兩臺使用Windows Vista，一臺使用Windows 7（所有Chrome 11）和一臺使用Chrome 10的Ubuntu機器。失敗。 – dbroeks 2011-05-20 14:40:01

此行爲是由單詞「天」，這是3代幣，而你只允許2

如果用maxlength=3替換maxlength=2造成的，一切都很好。

通常情況下，您會在Chrome中獲得本機信息，但由於您自己定義了focus事件，因此此消息被抑制。

請看看會發生什麼，如果你不定義focus：http://jsfiddle.net/MyewW/2/

而且有案例看你使用maxlength=3：http://jsfiddle.net/MyewW/3/

來源

2011-05-20 14:39:10 pimvdb

真是奇怪的行爲。我在表單中添加了「myform」的id，並在提交中添加了「mysubmit」。在prefillTextfield行之後添加此似乎工作。

$('#mysubmit').click(function(e) 
{ 
    e.preventDefault(); 
    $('#theform').submit(); 
});

不知道爲什麼Chrome是後點擊提交發送焦點到輸入

來源

2011-05-20 15:09:26 theirongiant

帶預填的HTML表單不會在Chrome中提交

回答

相關問題