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

  • 可以使用一些标准或非标准的方法选择文本框中的全部或部分文本。
  • 大多数浏览器都采用了Firefox操作选择文本的方法,但IE仍然坚持自己的实现。
  • 在文本框的内容变化时,可以通过侦听键盘事件以及检测插入的字符,来允许或禁止用户输入某些字符。

除Opera之外的所有浏览器都支持剪贴板事件,包括copycutpaste。其他浏览器在实现剪贴板事件时也分为几种不同的情况。

  • 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复制到一个表单字段中。

【本文内容摘自:《JavaScript高级程序设计》(第3版)Nicholas C.Zakas 著 李松峰 曹力 译】