理解JavaScript表单的基础知识


Posted in Javascript onJanuary 25, 2016

HTMLFormElement继承了HTMLElement,它自己独有的属性和方法有:

  • acceptCharset:服务器能够处理的字符集,等价于HTML的accept-charset特性
  • action:接收请求的URL,等价于HTML中的action特性。
  • elements:表单中所有控件的集合(HTMLCollection)
  • enctype:请求的编码类型
  • length:表单中控件的数量
  • method:要发送的HTTP请求类型,通常是get或post
  • name:表单的名称
  • reset():将所有表单域重置为默认值
  • submit():提交表单
  • target:用于发送请求和接收响应的窗口名称;

取得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

共有的表单字段属性

  • disabled: 布尔值,表示当前字段是否被禁用;
  • form: 指向当前字段所属表单的指针:只读;
  • name: 当前字段的名称;
  • readOnly: 布尔值,表示当前字段是否只读;
  • tabIndex: 表示当前字段的切换(tab)序号;
  • type: 当前字段的类型;
  • value: 当前字段被提交给服务器的值。对文件字段来说,这个属性是只读的,包含着文件在计算机中的路径;

可通过submit事件在提交表单后禁用提交按钮,但不可以用onclick事件,因为onclick在不同浏览器中有“时差”;

共有表单字段方法

  • focus(): 激活字段,使其可以响应键盘事件;
  • blur(): 失去焦点,触发;使用的场合不多;

可以在侦听页面的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;
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
Firefox下提示illegal character并出现乱码的原因
Mar 25 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
May 22 Javascript
js创建数据共享接口——简化框架之间相互传值
Oct 23 Javascript
jquery实现鼠标悬浮停止轮播特效
Aug 20 Javascript
浏览器复制插件zeroclipboard使用指南
Mar 26 Javascript
Angularjs 动态改变title标题(兼容ios)
Dec 29 Javascript
微信小程序 视图容器组件的详解及实例代码
Jan 19 Javascript
Bootstrap3 模态框使用实例
Feb 22 Javascript
layer弹出层全屏及关闭方法
Aug 17 Javascript
vue router 用户登陆功能的实例代码
Apr 24 Javascript
element实现合并单元格通用方法
Nov 13 Javascript
JavaScript实现复选框全选和取消全选
Nov 20 Javascript
jquery获取文档高度和窗口高度汇总
Jan 25 #Javascript
JavaScript数组的一些奇葩行为
Jan 25 #Javascript
JavaScript文本框脚本编写的注意事项
Jan 25 #Javascript
详解js私有作用域中创建特权方法
Jan 25 #Javascript
超赞的jQuery图片滑块动画特效代码汇总
Jan 25 #Javascript
理解js对象继承的N种模式
Jan 25 #Javascript
解决js函数闭包内存泄露问题的办法
Jan 25 #Javascript
You might like
写php分页时出现的Fatal error的解决方法
2011/04/18 PHP
解析PHPExcel使用的常用说明以及把PHPExcel整合进CI框架的介绍
2013/06/24 PHP
深入解析phpCB批量转换的代码示例
2013/06/27 PHP
PHP开发框架Laravel数据库操作方法总结
2014/09/03 PHP
Zend Framework入门教程之Zend_Session会话操作详解
2016/12/08 PHP
Javascript实例教程(19) 使用HoTMetal(4)
2006/12/23 Javascript
JavaScript 动态创建VML的方法
2009/10/14 Javascript
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
2010/03/17 Javascript
StringTemplate遇见jQuery冲突的解决方法
2011/09/22 Javascript
JS实现跟随鼠标立体翻转图片的方法
2015/05/04 Javascript
异步JavaScript编程中的Promise使用方法
2015/07/28 Javascript
javascript中字体浮动效果的简单实例演示
2015/11/18 Javascript
移动适配的几种方案(三种方案)
2016/11/25 Javascript
利用纯JS实现像素逐渐显示的方法示例
2017/08/14 Javascript
VUE+Element环境搭建与安装的方法步骤
2019/01/24 Javascript
vuex 中插件的编写案例解析
2019/06/10 Javascript
vue实现评论列表功能
2019/10/25 Javascript
JS实现纸牌发牌动画
2021/01/19 Javascript
JS实现点击掉落特效
2021/01/29 Javascript
[43:32]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第一场
2014/05/26 DOTA
[01:39:42]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
浅谈python类属性的访问、设置和删除方法
2016/07/25 Python
python+django+sql学生信息管理后台开发
2018/01/11 Python
Python设计模式之享元模式原理与用法实例分析
2019/01/11 Python
使用python实现mqtt的发布和订阅
2019/05/05 Python
python提取xml里面的链接源码详解
2019/10/15 Python
django 文件上传功能的相关实例代码(简单易懂)
2020/01/22 Python
浅谈python3打包与拆包在函数的应用详解
2020/05/02 Python
pyecharts调整图例与各板块的位置间距实例
2020/05/16 Python
南非最受欢迎的时尚品牌:MRP
2016/09/18 全球购物
爱游人:Travelliker
2017/09/05 全球购物
EntityManager都有哪些方法
2013/11/01 面试题
婚假请假条怎么写
2014/04/10 职场文书
《假如》教学反思
2014/04/17 职场文书
个人租房协议书范本
2014/09/30 职场文书
警示教育片观后感
2015/06/17 职场文书