理解JavaScript表单的基础知识

前端技术 2023/09/05 JavaScript

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;
  }
}

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

本文地址：https://www.stayed.cn/item/12783

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案