夏草v
夏草v

前端重新学习（8）Javascipt 之表单

来源 《Javascript高级程序设计》 笔记

JavaScript最初的一个应用，就是分担服务器处理表单的责任，打破处处依赖服务器的局面。尽 管目前的 Web 和 JavaScript已经有了长足的发展，但 Web 表单的变化并不明显。

目录

表单基础

表单提交

表单重置

表单字段

文本框脚本

选择文本

过滤输入

自动切换焦点

HTML5约束验证API

选择框脚本

选择选项

添加选项

移除选项

移动和重排选项

表单序列化

富文本编辑

使用contenteditable属性

操作富文本

富文本选区

表单与富文本

 

由于 Web 表单 没有为许多常见任务提供现成的解决手段，很多开发人员不仅会在验证表单时使用 JavaScirpt，而且还 增强了一些标准表单控件的默认行为。

虽然 HTML和 Web 应用自诞生以来已经发生了天翻地覆的变化，但 Web 表单相对却没有什么改 变。使用 JavaScript可以增强已有的表单字段，从而创造出新的功能，或者提升表单的易用性。为此， 表单、表单字段都引入了相应的属性和方法，以便 JavaScript使用。

下面是本文介绍的几个概念。

  • 可以使用一些标准或非标准的方法选择文本框中的全部或部分文本。
  • 大多数浏览器都采用了 Firefox操作选择文本的方式，但 IE仍然坚持自己的实现。
  • 在文本框的内容变化时，可以通过侦听键盘事件以及检测插入的字符，来允许或禁止用户输入 某些字符。 除 Opera之外的所有浏览器都支持剪贴板事件，包括 copy、cut 和 paste。其他浏览器在实现剪 贴板事件时也可以分为几种不同的情况。
  • IE、Firefox、Chrome和 Safari允许通过 JavaScript访问剪贴板中的数据，而 Opera不允许这种访 问方式。
  • 即使是 IE、Chrome和 Safari，它们各自的实现方式也不相同。
  • Firefox、Safari和 Chrome只允许在 paste 事件发生时读取剪贴板数据，而 IE没有这个限制。
  • Firefox、Safari和 Chrome只允许在发生剪贴板事件时访问与剪贴板相关的信息，而 IE允许在任 何时候访问相关信息。

在文本框内容必须限制为某些特定字符的情况下，就可以利用剪贴板事件来屏蔽通过粘贴向文本框 中插入内容的操作。 选择框也是经常要通过 JavaScript来控制的一个表单字段。由于有了 DOM，对选择框的操作比以前 要方便多了。添加选项、移除选项、将选项从一个选择框移动到另一个选择框，甚至对选项进行排序等 操作，都可以使用标准的 DOM技术来实现。

富文本编辑功能是通过一个包含空 HTML 文档的 iframe 元素来实现的。通过将空文档的 designMode 属性设置为"on"，就可以将该页面转换为可编辑状态，此时其表现如同字处理软件。另外， 也可以将某个元素设置为 contenteditable。在默认情况下，可以将字体加粗或者将文本转换为斜体， 还可以使用剪贴板。JavaScript通过使用 execCommand()方法也可以实现相同的一些功能。另外，使用 queryCommandEnabled()、queryCommandState()和 queryCommandValue()方法则可以取得有关 文本选区的信息。由于以这种方式构建的富文本编辑器并不是一个表单字段，因此在将其内容提交给 服务器之前，必须将 iframe 或 contenteditable 元素中的 HTML复制到一个表单字段中。

表单基础

在HTML中，表单是由

来表示的，而在JavaScript中，表单对应的是HTMLFormElement类型。HTMLFormElement继承了HTMLElement，因此它跟其他HTML元素具有相同的默认属性。

也有自己独有的属性和方法：

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

取得元素引用的方式有好几种。其中常见的方式就是将它看成与其他元素一样，并为其 添加 id 特性，然后再像下面这样使用 getElementById()方法找到它。

var form = document.getElementById("form1");

其次，通过 document.forms 可以取得页面中所有的表单。在这个集合中，可以通过数值索引或 name值来取得特定的表单，如下面的例子所示

var firstForm = document.forms[0];        //取得页面中的第一个表单 
var myForm = document.forms["form2"];     //取得页面中名称为"form2"的表单

表单提交

使用或

只要表单中存在上面列出的任何一种按钮，那么在相应表单控件拥有焦点的情况下，按回车键就可 以提交该表单。（textarea 是一个例外，在文本区中回车会换行。）如果表单里没有提交按钮，按回车 键不会提交表单

以这种方式提交表单时，浏览器会在将请求发送给服务器之前触发 submit 事件。这样，我们就有 机会验证表单数据，并据以决定是否允许表单提交。阻止这个事件的默认行为就可以取消表单提交。例 如，下列代码会阻止表单提交。

var form = document.getElementById("myForm"); 
EventUtil.addHandler(form, "submit", function(event){ 
 
    //取得事件对象     
    event = EventUtil.getEvent(event); 
 
    //阻止默认事件     
    EventUtil.preventDefault(event); 
    
});

代码会报错

ReferenceError: EventUtil is not defined

解决方法是创建EventUtil对象 将下面链接内页面代码粘贴在上面代码前面 EventUtil对象全见

EventUtil对象是为了平衡不同浏览器间实现事件的差异或事件方法的差异而存在的

addHandler 方法职责是分别视情况而定来使用DOM0级方法、DOM2级方法或IE方法来添加事件。
这个方法属于EventUtil的对象，可以使用这个对象来处理浏览器间的差异。

addHandler() 方法接受3个参数：要操作的元素、事件名称和事件处理程序函数。

与addHandler()方法对应的方法是removeHandler()，它也接受相同参数。
这个方法的职责是移除之前添加的事件处理程序----
---无论该事件处理程序是采取什么方式添加到元素中的。如果其他方法无效，默认采用DOM0级方法。        

用法：

方法中首先检查DOM2级方法，如果DOM2级方法存在，则使用该方法：
传入事件类型、事件处理程序、和第三个参数false（表示冒泡阶段）。

 如果存在的是IE的方法，则采取第二种方案。
 （注意，为了在IE8及更早版本中运行，此时的事件类型必须加上“on"前缀。）
 
最后一种可能就是使用DOM0级方法。
此时，我们使用的是括号语法来将属性名指定为事件处理程序，或者将事件设置为null。

定义的 EventUtil 对象，以便跨浏览器处理事件。调用 prevetnDefault() 方法阻止了表单提交。一般来说，在表单数据无效而不能发送给服务器时，可以使用这一技术。 在 JavaScript 中，以编程方式调用 submit()方法也可以提交表单。而且，这种方式无需表单包含 提交按钮，任何时候都可以正常提交表单。来看一个例子。

var form = document.getElementById("myForm"); 
 
//提交表单 
form.submit();

在以调用 submit()方法的形式提交表单时，不会触发 submit 事件，因此要记得在调用此方法之 前先验证表单数据。

如果点击提交后，存在延迟/反应慢如何解决？

解决这一问题 的办法有两个：

  •  在第一次提交表单后就禁用提交按钮，或者
  •  onsubmit 事件处理程序取消后续的 表单提交操作。

表单重置

在用户单击重置按钮时，表单会被重置。使用 type 特性值为"reset"的或

在重置表单时，所有表单字段都会恢复到页面刚加载完毕时的初 始值。如果某个字段的初始值为空，就会恢复为空；而带有默认值的字段，也会恢复为默认值。

用户单击重置按钮重置表单时，会触发 reset 事件。利用这个机会，我们可以在必要时取消重置 操作。例如，下面展示了阻止重置表单的代码

//这里使用了定义的 EventUtil 对象，以便跨浏览器处理事件。
var form = document.getElementById("myForm"); 
EventUtil.addHandler(form, "reset", function(event){ 
 
    //取得事件对象     
    event = EventUtil.getEvent(event); 
 
    //阻止表单重置     
    EventUtil.preventDefault(event); 
    
});

有效解决了事件在不同浏览器上功能兼容性。

与提交表单一样，也可以通过 JavaScript来重置表单，如下面的例子所示。

var form = document.getElementById("myForm"); 
 
//重置表单
form.reset();

与调用 submit()方法不同，调用 reset()方法会像单击重置按钮一样触发 reset 事件

在 Web 表单设计中，重置表单通常意味着对已经填写的数据不满意。重置表单 经常会导致用户摸不着头脑，如果意外地触发了表单重置事件，那么用户甚至会很恼 火。事实上，重置表单的需求是很少见的。更常见的做法是提供一个取消按钮，让用 户能够回到前一个页面，而不是不分青红皂白地重置表单中的所有值。

表单字段

可以像访问页面中的其他元素一样，使用原生 DOM 方法访问表单元素。此外，每个表单都有 elements 属性，该属性是表单中所有表单元素（字段）的集合。

这个 elements 集合是一个有序列表， 其中包含着表单中的所有字段，例如、之间，如下面的例子所示。

另一个与的区别在于，不能在 HTML中给