我的代码适用于所有主流浏览器，但 Google Chrome 除外，它的行为很奇怪。我使用的是谷歌浏览器 11.0.696.68。这些事实适用于 Chrome:
- 如果我为所有输入字段都赋值，我可以毫无问题地提交表单。
- 如果我将“天”字段留空并按下提交按钮，则不会提交表单，但出于某种原因焦点会转到“天”字段。
- 如果我将焦点放在“天”以外的任何字段上，例如'other'，按回车，表单未提交，焦点再次转到日字段。
- 如果我将焦点放在空的日期字段上并按回车键，则表单已提交。
- 如果我注释掉行
prefillTextfield( 'candidate_dateOfBirth_day', 'Day' );，一切正常。奇怪的是，还有一个类似的字段没有引起任何问题:year。
这是 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"> </label>
<input type="submit" class="textField" value="Submit" />
</div>
</form>
</body>
</html>
提前致谢!
JSFiddle - here
最佳答案
此行为是由单词“Day”引起的，它是 3 个标记，而您只允许 2 个标记。
如果将 maxlength=2 替换为 maxlength=3，一切正常。
通常情况下，您会在 Chrome 中收到一条 native 消息，但由于您自己定义了一个 focus 事件，因此这条消息被抑制了。
请看看如果你没有定义focus会发生什么:http://jsfiddle.net/MyewW/2/
如果您使用 maxlength=3，请查看:http://jsfiddle.net/MyewW/3/
关于javascript - 带有预填充的 HTML 表单不会在 Chrome 中提交，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6072694/