这篇文章主要带领大家理解 JavaScript 表单的基础知识,对 javascript 表单脚本进行深入学习,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
htmlFormElement 继承了 HTMLElement,它自己独有的属性和方法有:
取得 form 元素的引用可以是 getElementById、也可以是 document.forms 中数值索引或 name 值;
一、提交表单
提交表单的按钮有三种:
- <input type="submit" value="Submit Form">
- <button type="submint">
- Submit Form
- </button>
- <input type="image" src="">
以上面这种方法提交表单会在浏览器请求发送给服务器之前触发 submit 事件,这样就可以验证表单数据和决定是否允许提交表单,如下面的代码就可以阻止表单的提交:
- var form = document.getElementById("myForm");
- form.addEventListener("submit", function () {
- event.preventDefault();
- });
另外也可以通过 js 脚本调用 submit() 方法提交表单,在调用 submit() 提交表单不会触发 submit 事件。
- var form = document.getElementById("myForm");
- form.submit();
第一次提交表单后如果长时间没有回应,用户会变得不耐烦,往往多次点击提交按钮,导致重复提交表单,因此应该在第一次提交表单后就禁用提交按钮或利用 onsubmit 事件阻止后续操作。
- var submitBtn = document.getElementById("submitBtn");
- submitBtn.onclick = function () {
- //处理表格和提交等等
- submitBtn.disabled = true;
- };
二、重置表单
重置表单应该使用 input 或 button:
- <input type="reset" value="Reset Form">
- <button type="reset">
- Reset Form
- </button>
当用户单击重置按钮重置表单时,会触发 reset 事件,可以在必要的时候取消重置操作:
- var resetBtn = document.getElementById("resetBtn");
- resetBtn.addEventListener("reset", function () {
- event.preventDefault();
- });
另外也可以通过 js 脚本调用 reset() 方法重置表单,在调用 reset() 方法重置表单时会触发 reset 事件。
- var form = document.getElementById("myForm");
- form.reset();
三、表单字段
每个表单都有一个 elements 属性,该属性是表单中所有表单(字段)的集合:
- var form = document.forms["myForm"];
- var list = [];
- //取得表单中第一个字段
- var firstName = form.elements[0];
- list.push(firstName.name);
- //取得表单中名为lastName的字段
- var lastName = form.elements["lastName"];
- list.push(lastName.name);
- // 取得表单中包含的字段的数量
- var fieldCount = form.elements.length;
- list.push(fieldCount);
- console.log(list.toString()); //firstName,lastName,4
多个表单控件使用一个 name(单选按钮),那么会返回以该 name 命名的 NodeList:
- <form id="myForm" name="myForm">
- <ul>
- <li>
- <input type="radio" name="color" value="red">
- red
- </li>
- <li>
- <input type="radio" name="color" value="yellow">
- yellow
- </li>
- <li>
- <input type="radio" name="color" value="blue">
- blue
- </li>
- </ul>
- <button type="submint">
- Submit Form
- </button>
- <button type="reset">
- Reset Form
- </button>
- </form>
name 都是 color,在访问 elements["color"] 时,返回 NodeList:
- var list = [];
- var form = document.forms["myForm"];
- var radios = form.elements["color"];
- console.log(radios.length) //3
共有的表单字段属性
可通过 submit 事件在提交表单后禁用提交按钮,但不可以用 onclick 事件,因为 onclick 在不同浏览器中有 "时差";
共有表单字段方法
可以在侦听页面的 load 事件上添加该 focus() 方法:
- window.addEventListener("load", function () {
- document.forms["myForm"].elements["lastName"].focus();
- });
需要注意,第一个表单字段是 input,如果其 type 特性为 "hidden",或者 CSS 属性的 display 和 visibility 属性隐藏了该字段,就会导致错误。
在 HTML5 中,表单中新增加了 autofocus 属性,自动把焦点移动到相应字段。
autofocus
如:
- <input type="text" name="lastName" autofocus>
或者检测是否设置了该属性,没有的话再调用 focus() 方法:
- window.addEventListener("load", function () {
- var form = document.forms["myForm"];
- if (form["lastName"].autofocus !== true) {
- form["lastName"].focus();
- };
- });
共有的表单字段事件
除了支持鼠标键盘更改和 HTML 事件之外,所有的表单字段都支持下列 3 个事件:
blur:当前字段失去焦点时触发;
change:input 元素和 textarea 元素,在它们失去焦点且 value 值改变时触发;select 元素在其选项改变时触发(不失去焦点也会触发);
focus:当前字段获得焦点时触发;
如:
- var form = document.forms["myForm"];
- var firstName = form.elements["firstName"];
- firstName.addEventListener("focus", handler);
- firstName.addEventListener("blur", handler);
- firstName.addEventListener("change", handler);
- function handler() {
- switch (event.type) {
- case "focus":
- if (firstName.style.backgroundColor !== "red") {
- firstName.style.backgroundColor = "yellow";
- };
- break;
- case "blur":
- if (event.target.value.length < 1) {
- firstName.style.backgroundColor = "red";
- } else {
- firstName.style.backgroundColor = "";
- };
- break;
- case "change":
- if (event.target.value.length < 1) {
- firstName.style.backgroundColor = "red";
- } else {
- firstName.style.backgroundColor = "";
- };
- break;
- }
- }
来源: http://www.phperz.com/article/17/0216/267415.html