1、表单提交submit
很多用户可能会重复单击表单的提交按钮。在涉及信用卡消费时,这就是个问题:因为会导致费用翻番。为此,最常见的解决方案,就是在第一次单击后就禁用提交按钮。只要
侦听submit 事件
,并在该事件发生时禁用提交按钮即可。以下就是这样一个例子。
//避免多次提交表单
EventUtil.addHandler(form, "submit", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
//取得提交按钮
var btn = target.elements["submit-btn"];
//禁用它
btn.disabled = true;
});
注意,不能通过onclick
事件处理程序来实现这个功能,原因是不同浏览器之间存在“时差”:有的浏览器会在触发表单的submit 事件之前
触发click 事件,而有的浏览器则相反
。对于先触发click 事件的浏览器,意味着会在提交发生之前禁用按钮,结果永远都不会提交表单。
因此,最好是通过
submit 事件
来禁用提交按钮。不过,这种方式不适合表单中不包含提交按钮的情况;如前所述,只有在包含提交按钮的情况下,才有可能触发表单的submit事件
。
此外,
<input>
和<button>
元素的type 属性是可以动态修改的,而<select>
元素的type 属性则是只读的。
2、自动对焦autofocus
HTML5 为表单字段新增了一个
autofocus
属性。在支持这个属性的浏览器中,只要设置这个属性,不用JavaScript 就能自动把焦点移动到相应字段。例如:
<input type="text" autofocus>
因为autofocus
是一个布尔值属性,所以在支持的浏览器中它的值应该是true
。(在不支持的浏览器中,它的值将是空字符串。)
3、输入模式pattern
HTML5 为文本字段新增了pattern
属性。这个属性的值是一个正则表达式,用于匹配文本框中的值。例如,如果只想允许在文本字段中输入数值,可以像下面的代码一样应用约束:
<input type="text" pattern="\d+" name="count">
注意,模式的开头和末尾不用加^和$符号(假定已经有了)。这两个符号表示输入的值必须从头到尾都与模式匹配。