带有预填充功能的 HTML 表单不会在 Chrome 中提交

HTML form with prefill doesn't get submitted in Chrome

本文关键字：Chrome 提交 表单 HTML 填充 功能      更新时间：2023-09-26

我的代码适用于所有主流浏览器，除了谷歌浏览器，它的行为很奇怪。我正在使用谷歌浏览器 11.0.696.68。以下事实适用于 Chrome：

  • 如果我为所有输入字段提供值，我可以毫无困难地提交表单。
  • 如果我将字段"day"留空并按提交按钮，则表单不会提交，但出于某种原因，焦点转到日期字段。
  • 如果我将焦点放在"天"以外的任何字段，例如"其他"，然后按回车键，则表单不会提交，焦点将再次转到日字段。
  • 如果我将焦点放在空天字段并按回车键，则表单已提交。
  • 如果我注释掉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 - 这里

此行为是由单词"Day"引起的，该单词是 3 个令牌，而您只允许 2 个。

如果你用maxlength=3替换maxlength=2，一切都很好。

通常，您会在Chrome中收到一条本机消息，但由于您自己定义了focus事件，因此此消息已被抑制。

请看一下如果不定义focus会发生什么：http://jsfiddle.net/MyewW/2/

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

非常奇怪的行为。我在表单中添加了"myform"的id，并在提交中添加了"mysubmit"。在预填充文本字段行之后添加它似乎有效。

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

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

相关文章：