Mozilla Firefox会对任何无效的表单控件应用伪类
:-moz-ui-invalid
。如果表单从未提交过或在表单的
submit()
方法被调用时,所有表单输入控件都是有效的,则调用表单的
reset()
方法将导致伪类从输入控件中删除。
但是,如果表单提交时任何一个输入控件无效,则即使表单已被重置,该伪类仍将始终应用于无效的输入控件。
有关完整的文档和可下载的JavaScript文件,请访问:
http://www.syn-to.com/moz-ui-invalid.php。
var form;
(function()
{
"use strict";
form = function(name)
{
var a =
{
"registerReset": function()
{
if(typeof document.forms[name].style.boxShadow !== 'undefined')
{
document.forms[name].addEventListener('reset', a.resetEventHandler);
}
},
"reset": function()
{
a.registerReset();
document.forms[name].reset();
},
"resetEventHandler": function()
{
function applyFix(inputControls)
{
for(var i=0;i<inputControls.length;i++)
{
inputControls[i].style.boxShadow = 'none';
inputControls[i].addEventListener('invalid', a.invalidEventHandler);
inputControls[i].addEventListener('keydown', a.keydownEventHandler);
}
}
var inputControls = this.getElementsByTagName('input');
applyFix(inputControls);
var inputControls = this.getElementsByTagName('textarea');
applyFix(inputControls);
var inputControls = this.getElementsByTagName('select');
applyFix(inputControls);
},
"invalidEventHandler": function()
{
this.style.boxShadow = '';
this.removeEventListener('invalid', a.invalidEventHandler);
this.removeEventListener('keydown', a.keydownEventHandler);
},
"keydownEventHandler": function()
{
this.addEventListener('blur', a.blurEventHandler);
},
"blurEventHandler": function()
{
this.checkValidity();
this.removeEventListener('blur', a.blurEventHandler);
}
};
return a;
}
})();
使用方法:
在本地重置之前(调用表单的reset()
方法),必须调用以下两种方法之一:
<form name="formName" ...>...</form>
form('formName').registerReset(); //registers the event handlers once
form('formName').reset(); //registers the event handlers at the time reset is called
//and then calls the form's native reset method, may be used
//in place of the native reset
在我看来,无论是否使用ajax,无论用户之前是否尝试提交了具有无效输入控件的表单,重置操作都应该删除该样式!我已经提交了一个错误报告,但目前还没有被认为是一个错误:
https://bugzilla.mozilla.org/show_bug.cgi?id=903200。
这也应该帮助其他人。