javascript-带有预填充的HTML表单无法在Chrome中提交
作者：互联网
我的代码可在所有主要浏览器上使用,但Google Chrome浏览器除外,该浏览器的运行方式很奇怪.我正在使用Google Chrome 11.0.696.68.这些事实适用于Chrome：
>如果我为所有输入字段提供值,则可以轻松提交表单.
>如果我将“天”字段保留为空白,然后按提交按钮,则不会提交表单,但是出于某种原因,焦点将转移到“天”字段.
>如果我将重点放在“天”以外的任何其他领域,例如“其他”,然后按Enter键,则不提交表单,焦点再次移至“日”字段.
>如果我将焦点放在空白日期字段上,然后按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"> </label>
<input type="submit" class="textField" value="Submit" />
</div>
</form>
</body>
</html>
提前致谢！
JSFiddle-here
解决方法:
此行为是由“ Day”一词引起的,“ Day”是3个令牌,而您只允许2个令牌.
如果将maxlength = 2替换为maxlength = 3,则一切正常.
通常,您会在Chrome中收到此消息,但是由于您自己定义了焦点事件,因此该消息被禁止.
如果您未定义焦点,请看看会发生什么：http://jsfiddle.net/MyewW/2/
看看是否使用maxlength = 3：http://jsfiddle.net/MyewW/3/
标签：forms,google-chrome,javascript,jquery 来源： https://codeday.me/bug/20191208/2091090.html