第14章 表单脚本
14.1 表单的基础知识
?获得表单元素：
// 取得id为form_1的元素
var form = document.getElementById("form_1");
// 得到第一个表单元素
var firstForm = document.forms[0];
// 得到名称为test的form
var myForm = document.forms["test"];14.1.1 提交表单
以下三种类型的按钮可以提交表单：
<input type="submit" value="提交">
<button type="submit">提交</button>
<input type="image" src="graphic.gif">按钮点击后，会调用submit事件，检验代码则放在此处。
var form = document.getElementById("form_1");
EventUtil.addHandler(form,"submit",function (event) {
event = EventUtil.getEvent(event);
EventUtil.preventDefault(event);
});在使用另一个js中的函数时，要注意在HTML中引入外部JS文件顺序，我在调用时将函数所在的js放在了后方，结果函数没有起使用，对于我这样的新手是容易引起这样的错误的。
<script src="js/func.js"></script>
<script src="js/myjs.js"></script>在代码中可以使用form.submit()方法来提交而不用点击按钮。
防止重复提交的方法：
- 第一提交后禁用按钮；
- 利用onsubmit事件处理程序取消后续的表单提交操作。
14.1.2 重置表单
以下两种类型的按钮可以重置表单：
<input type="reset" value="重置">
<button type="reset">重置</button>单击重置按钮时，会触发reset事件。
在代码中可以使用form.reset()方法来重置表单，不过调用方法也会产生reset事件。
14.1.3 表单字段
表单中元素的访问：
var form = document.getElementById("form_1");
// 使用序号的方式访问
var field1 = form.elements[0];
// 使用name方式访问
var field2 = form.elements['secondText'];
// 得到表单中包含字段的数量
var fieldCount = form.elements.length;像radio这种多个控件使用相同的name，使用序号访问的话，每次会得到一个控件，但如果通过name访问的话，那就会得到一个nodelist。
1、共有的表单控件属性
- disabled 布尔值/当前控件是否被禁用
- form 指向当前字段所属表单的指针，只读
- name 名称
- readOnly 布尔值/是否只读
- tabIndex 切换序号
- type 控件类型
- value 将被提交给服务器的值。
除form属性外，其他属性都是可以动态被改变的。
input与button的type可以动态修改，而select的type是只读的。
除fieldset之外，所有表单字段都有type属性：
select
select-one
select multiple
select-multiple
button
submit
2、共有的表单字段方法
共用方法：focus()和blur()
input元素，且type是hidden，则focus会出错；
css的display和visibility隐藏了元素，则focus也会出错；
如果元素有autofocus，则不用js代码也会自动获得焦点。
<input type=”text” autofocus>为了保证autofocus正常运行，需要检测浏览器是否支持autofocus：
EventUtil.addHandler(window,"load",function (event) {
var element = document.forms[0],elements[0];
if (element.autofocus !== true){
element.focus();
console.log("JS focus");
}
});3、共有的表单字段事件
blur 失去焦点
change input和textarea，在失去焦点且value值改变时触发；select则其选项改变时触发。
focus 获得焦点
下面代码演示了blur和focus以及change效果：
var textbox = document.forms[0].elements[0];
EventUtil.addHandler(textbox,"focus",function (event) {
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
if (target.style.backgroundColor != "red"){
target.style.backgroundColor = "yellow";
}
});
EventUtil.addHandler(textbox,"blur",function (event) {
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
if (/[^\d]/.test(target.value)){
target.style.backgroundColor = "red";
} else {
target.style.backgroundColor = "";
}
});
EventUtil.addHandler(textbox,"change",function (event) {
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
if (/[^\d]/.test(target.value)){
target.style.backgroundColor = "red";
} else {
target.style.backgroundColor = "";
}
});