ft207741
ft207741

JavaScript高级程序设计(第三版) 第14章 表单Form

1### Menu

第14章 表单脚本

14.1 表单的基础知识
  • 14.1.1 提交表单
  • 14.1.2 重置表单
  • 14.1.3 表单字段
14.2 文本框脚本
  • 14.2.1 选择文本
  • 14.2.2 过滤输入
  • 14.2.3 自动切换焦点
  • 14.2.4 HTML5 约束验证API
14.3 选择框脚本
14.4 表单序列化
14.5 富文本编辑
  • 14.5.1 使用contenteditable属性
  • 14.5.2 操作富文本
  • 14.5.3 富文本选区
  • 14.5.4 表单与富文本
14.1 表单的基础知识
  • 在 HTML中，表单是由
    元素来表示的, 而在 JavaScript 中，表单对应的则是 HTMLFormElement 类型。HTMLFormElement 继承了 HTMLElement，因而与其他 HTML 元素具有相同的默认属性。
  • 注意，可以同时为表单指定 id 和 name 属性，但它们的值不一定相同。
  • 取得元素引用的方式有好几种:
    1. 最常见的方式就是将它看成与其他元素一样，并为其添加 id 特性，然后再像下面这样使用 getElementById()方法找到它。
    2. 通过 document.forms 可以取得页面中所有的表单。在这个集合中，可以通过数值索引或
      name 值来取得特定的表单
var firstForm = document.forms[0];       //取得页面中的第一个表单
var myForm = document.forms["form2"];       //取得页面中名称为"form2"的表单
  • 14.1.1 提交表单
  • 只要表单中存在上面列出的任何一种按钮，那么在相应表单控件拥有焦点的情况下，按回车键就可以提交该表单。（textarea 是一个例外，在文本区中回车会换行。）如果表单里没有提交按钮，按回车
    键不会提交表单。
  • 以这种方式提交表单时，浏览器会在将请求发送给服务器之前触发 submit 事件。这样，我们就有机会验证表单数据，并据以决定是否允许表单提交。阻止这个事件的默认行为就可以取消表单提交。例
    如，下列代码会阻止表单提交。
  • from按钮可以直接提交表单， 不用submit按钮 form.submit();

name
age
  • 14.1.2 重置表单
  • 这两个按钮都可以用来重置表单。
  • 14.1.3 表单字段
  • 每个表单都有elements属性
  • 单中所有表单元素（字段）的集合。这个 elements 集合是一个有序列表，其中包含着表单中的所有字段，例如、 之间，如下面的例子所示。
  • 另一个与的区别在于，不能在 HTML 中给