Question

我的代码适用于所有主流浏览器，但Google Chrome除外，它的行为很奇怪。我正在使用Google Chrome 11.0.696.68。这些事实适用于Chrome：

如果我给所有输入字段赋值，我可以毫无困难地提交表格。
如果我将字段'day'留空并按下提交按钮，则表单未提交，但由于某种原因，焦点会转到日期字段。
如果我将焦点放在除“日”之外的任何字段上，例如“其他”，然后按回车键，表单未提交，焦点再次转到日期字段。
如果我将焦点放在空白日期字段并按Enter键，则表单已提交。
如果我注释掉prefillTextfield( 'candidate_dateOfBirth_day', 'Day' );行，一切正常。奇怪的是，仍有类似的领域不会引起任何问题：年。

这是Google Chrome中的错误还是我的代码？

    <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

Answer 1

此行为是由“Day”一词引起的，当你只允许2时，这是3个令牌。

如果您将maxlength=2替换为maxlength=3，一切都会好的。

通常情况下，您会在Chrome中收到一条原生邮件，但由于您自己定义了focus个活动，因此此邮件已被拒绝。

如果您没有定义focus，请查看会发生什么：http://jsfiddle.net/MyewW/2/

如果您使用maxlength=3：http://jsfiddle.net/MyewW/3/

，请查看

Answer 2

真是奇怪的行为。我在表单中添加了“myform”的id，并在提交中添加了“mysubmit”。在prefillTextfield行之后添加它似乎可行。

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

在点击提交后，不知道为什么chrome会将焦点发送到输入

带有预填充的HTML表单无法在Chrome中提交

2 个答案: