理解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 相关文章推荐
Prototype Object对象 学习
Jul 12 Javascript
一个网页标题title的闪动提示效果实现思路
Mar 22 Javascript
JS代码实现根据时间变换页面背景效果
Jun 16 Javascript
JS判断日期格式是否合法的简单实例
Jul 11 Javascript
vue+element-ui动态生成多级表头的方法
Aug 28 Javascript
详解Vue中watch的详细用法
Nov 28 Javascript
vue柱状进度条图像的完美实现方案
Aug 26 Javascript
JavaScript 截取字符串代码实例
Sep 05 Javascript
jQuery实现简单弹幕效果
Nov 28 jQuery
angular组件间传值测试的方法详解
May 07 Javascript
原生JS实现天气预报
Jun 16 Javascript
vue 动态生成拓扑图的示例
Jan 03 Vue.js
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 登录记住密码实现思路
2013/05/07 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
php实现姓名根据首字母排序的类与方法(实例代码)
2018/05/16 PHP
js关于命名空间的函数实例
2015/02/05 Javascript
JavaScript识别网页关键字并进行描红的方法
2015/11/09 Javascript
vue,angular,avalon这三种MVVM框架优缺点
2016/04/27 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
2016/07/01 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
2016/09/23 Javascript
Vue.js实现拖放效果的实例
2016/09/30 Javascript
Web前端开发之水印、图片验证码
2016/11/27 Javascript
jquery实现文本框的禁用和启用
2016/12/07 Javascript
浅析JavaScript动画模拟拖拽原理
2016/12/09 Javascript
JS实现标签页切换效果
2017/05/04 Javascript
Node.js 的模块知识汇总
2017/08/16 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
2017/09/18 Javascript
微信小程序数据存储与取值详解
2018/01/30 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
2018/03/07 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
2019/12/25 jQuery
[00:32]2018DOTA2亚洲邀请赛Newbee出场
2018/04/03 DOTA
Python实现简单状态框架的方法
2015/03/19 Python
在服务器端实现无间断部署Python应用的教程
2015/04/16 Python
Python返回数组/List长度的实例
2018/06/23 Python
python 创建一维的0向量实例
2019/12/02 Python
pytorch GAN生成对抗网络实例
2020/01/10 Python
Python交互环境下打印和输入函数的实例内容
2020/02/16 Python
python制作一个简单的gui 数据库查询界面
2020/11/19 Python
HTML5拖拽功能实现的拼图游戏
2018/07/31 HTML / CSS
毕业研究生的自我鉴定
2013/11/30 职场文书
秋季运动会表扬稿
2014/01/16 职场文书
学生社团文化节开幕式主持词
2014/03/28 职场文书
公积金接收函格式
2015/01/30 职场文书
2015年世界无烟日活动方案
2015/05/04 职场文书
工作证明格式范文
2015/06/15 职场文书
MybatisPlus代码生成器的使用方法详解
2021/06/13 Java/Android
Nginx配置https的实现
2021/11/27 Servers
高性能跳频抗干扰宽带自组网电台
2022/02/18 无线电