JavaScript学习日志：表单脚本

Posted 2020-10-07

一，基础知识

1，取得<form>元素引用的方式，常用的是通过id，其次可以通过document.forms可以取得页面中所有的表单，在这个集合中，可以通过数值索引或name值来取得特定的表单。

2，以下代码生成的按钮都可用来提交表单，点击就提交

<!-- 通用提交按钮 -->
<input type="submit" value="Submit form" />

<!-- 自定义提交按钮 -->
<button type="submit">Submit Form</button>

<!-- 图像按钮 -->
<input type="image" src="graphic.gif" />

 阻止submit提交就用preventDefault()方法，还是用之前的EventUtil对象，在js中，除了按钮点击可以提交，还可以使用submit()方法，调用这个方法的时候，不会触发submit事件

var form = document.getElementById(‘myForm‘);
// 提交表单
form.submit();

3，重置表单

<!-- 通用重置按钮 -->
<input type="reset" value="Reset form" />

<!-- 自定义重置按钮 -->
<button type="reset">Reset Form</button>

也可以用js的reset()方法，form.reset()，和提交不同的是，这个方法会触发reset事件。

4，表单字段

form.elements集合是一个有序列表，包含着所有字段，可以通过位置索引或name来访问

5，共有的表单字段属性

disabled，name，readOnly，type，value，可以直接修改它们的值：

var form = document.getElementById(‘myForm‘);
var field = form.elements[0];

field.value = ‘another value‘;

field.form === form;   // true
field.focus();
field.disabled = true;
field.type = ‘checkbox‘;  // 不推荐，如果是<input>是可行的

 6，共有表单字段方法

focus()和blur()；html5为表单字段添加一个属性，autofocus，为了保证设置了能正常运行，要先检测，如果不能就用focus()

EventUtil.addHandler(window, ‘load‘, function(event){
     var element = document.forms[0].elements[0];
     if (element.autofocus !== true) {
         element.focus();
     }
})

 autofocus是一个布尔值，所有支持它的浏览器中值是true，不支持的为空字符串（IE不支持）

7，共有表单字段事件

blur，change，foces，还是用EventUtil对象来处理