理解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 相关文章推荐
javascript Demo模态窗口
Dec 06 Javascript
jquery根据锚点offset值实现动画切换
Sep 11 Javascript
js判断手机端(Android手机还是iPhone手机)
Jul 22 Javascript
javascript入门教程基础篇
Nov 16 Javascript
图解js图片轮播效果
Dec 20 Javascript
javascript合并表格单元格实例代码
Jan 03 Javascript
微信小程序开发一键登录 获取session_key和openid实例
Nov 23 Javascript
[js高手之路]原型式继承与寄生式继承详解
Aug 28 Javascript
解析Vue 2.5的Diff算法
Nov 28 Javascript
浅谈一个webpack构建速度优化误区
Jun 24 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
Oct 24 Javascript
通过实例了解Javascript柯里化流程
Mar 03 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设计模式 Builder(建造者模式)
2011/06/26 PHP
关于PHP中Object对象的笔记分享
2011/06/28 PHP
深入解析Session是否必须依赖Cookie
2013/08/02 PHP
PHP的反射类ReflectionClass、ReflectionMethod使用实例
2014/08/05 PHP
DEFER怎么用?
2006/07/01 Javascript
jQuery each()方法的使用方法
2010/03/18 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
2013/01/23 Javascript
js获得当前时区夏令时发生和终止的时间代码
2014/02/23 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
2014/10/30 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
2016/01/21 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
2017/01/20 Javascript
静态页面实现 include 引入公用代码的示例
2017/09/25 Javascript
jQuery带控制按钮轮播图插件
2020/07/31 jQuery
[57:09]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第一场 1月26日
2021/03/11 DOTA
python使用多线程不断刷新网页的方法
2015/03/31 Python
Python中动态获取对象的属性和方法的教程
2015/04/09 Python
在Django中限制已登录用户的访问的方法
2015/07/23 Python
python实现FTP服务器服务的方法
2017/04/11 Python
Python中PyQt5/PySide2的按钮控件使用实例
2019/08/17 Python
使用python制作一个解压缩软件
2019/11/13 Python
PyTorch中反卷积的用法详解
2019/12/30 Python
python操作ini类型配置文件的实例教程
2020/10/30 Python
使用pandas实现筛选出指定列值所对应的行
2020/12/13 Python
python中HTMLParser模块知识点总结
2021/01/25 Python
UGG雪地靴德国官网:UGG德国
2016/11/19 全球购物
adidas官方旗舰店:德国运动用品制造商
2017/11/25 全球购物
美国首屈一指的高品质珠宝设计师和零售商:Allurez
2018/01/23 全球购物
美国最大的在线寄售和旧货店:Swap.com
2018/08/27 全球购物
汽车维修与检测专业应届生求职信
2013/11/12 职场文书
生产总经理岗位职责
2013/12/19 职场文书
公务员群众路线专题民主生活会发言材料
2014/09/17 职场文书
2014年小学班主任工作总结
2014/11/08 职场文书
检讨书格式
2015/05/07 职场文书
Java实现给Word文件添加文字水印
2022/02/15 Java/Android
Nginx 匹配方式
2022/05/15 Servers
React如何使用axios请求数据并把数据渲染到组件
2022/08/05 Javascript