表单脚本
表单的基础知识
在javascript中,表单对应的是HTMLFormElement
类型,继承自HTMLELement
类型。独特的属性与方法:
- acceptCharset:服务器能够处理的字符集;等价于HTML 中的accept-charset 特性。
- action:接受请求的URL;等价于HTML 中的action 特性。
- elements:表单中所有控件的集合(HTMLCollection)。
- enctype:请求的编码类型;等价于HTML 中的enctype 特性。
- length:表单中控件的数量。
- method:要发送的HTTP 请求类型,通常是"get"或"post";等价于HTML 的method 特性。
- name:表单的名称;等价于HTML 的name 特性。
- reset():将所有表单域重置为默认值。
- submit():提交表单。
- target:用于发送请求和接收响应的窗口名称;等价于HTML 的target 特性。
通过documents.forms
可以取得页面中所有表单,可以通过数值索引或name
值来取得特定表单
提交表单
<!-- 通用提交按钮 -->
<input type="submit" value="Submit Form">
<!-- 自定义提交按钮 -->
<button type="submit">Submit Form</button>
<!-- 图像按钮 -->
<input type="image" src="graphic.gif">
阻止表单提交:
let form = document.getElementById("myForm");
form.addEventListener("submit", function (event) {
event.preventDefault();
})
let form = document.getElementById("myForm");
form.submit();//不会触发submit事件
重置表单
<!-- 通用重置按钮 -->
<input type="reset" value="Reset Form">
<!-- 自定义重置按钮 -->
<button type="reset">Reset Form</button>
阻止表单重置和利用javascript重置表单的操作与提交表单类似,只需将submit
改为reset
即可
表单字段
每个表单都有elements属性,是一个有序列表,包含表单的所有字段
let form = document.getElementById("form1");
//取得表单中的第一个字段
var field1 = form.elements[0];
//取得名为"textbox1"的字段
var field2 = form.elements["textbox1"];
//取得表单中包含的字段的数量
var fieldCount = form.elements.length;
var form = document.getElementById("myForm");
var colorFields = form.elements["color"];
alert(colorFields.length); //3
var firstColorField = colorFields[0];
var firstFormField = form.elements[0];
alert(firstColorField === firstFormField); //true
共有的表单字段属性
除了fieldset
元素之外,所有表单字段都拥有相同的一组属性:
- disabled:布尔值,表示当前字段是否被禁用。
- form:指向当前字段所属表单的指针;只读。
- name:当前字段的名称。
- readOnly:布尔值,表示当前字段是否只读。
- tabIndex:表示当前字段的切换(tab)序号。
- type:当前字段的类型,如"checkbox"、“radio”,等等。
- value:当前字段将被提交给服务器的值。对于文件字段,这个属性是只读的,包含文件在计算机中的路径。
let form = document.getElementsByTagName('form')[0];
//alert(form);
// let colorFields = form.elements['color'];
// let list = Array(colorFields);
// alert(list);
let field = form.elements[0];
field.value = "Another value";
field.focus();
field.disable = true;
field.type = "checkbox";//不推荐,但对<input>可行
let form = document.getElementsByTagName('form')[0];
form.addEventListener("submit", function (event) {
let target = event.target;
let btn = target.elements['submit-btn'];
btn.disabled =true;
})
共有的表单字段方法
focus()
与blur()
。focus()方法用于激活表单字段,使其可以响应键盘事件
window.addEventListener("load", function (event) {
document.forms[0].elements[1].focus();
})
倘若是对<input type="hidden">
的表单字段进行上述操作将会导致错误,通过CSS的display和visibility属性隐藏该字段都会导致错误
//自动对焦
window.addEventListener("load", function (event) {
let element = document.forms[0].elements[0];
if(element.autofocus === true){
element.focus();
console.log("JS focus");
}
})
blur()方法则相反
共有的表单字段事件
-
blur:当前字段失去焦点时触发。
-
change:对于
<input>
和<textarea>
元素,在它们失去焦点且value 值改变时触发;对于<select>
元素,在其选项改变时触发。 -
focus:当前字段获得焦点时触发。
let textbox = document.forms[0].elements[0];
textbox.addEventListener("focus", function (event) {
let target