JavaScript高级程序设计笔记 19

第19章 表单脚本

1. 表单基础

  • <form> 元素对应 HTMLFormElement 类型，继承自 HTMLElement。
  • 常用属性：
    • action：请求 URL。
    • method：请求方法（如 "post"、"get"）。
    • enctype：编码类型（如 "multipart/form-data"）。
    • target：响应显示位置。
  • 获取表单元素：
    • document.getElementById()
    • document.forms[index] 或 document.forms[name]（返回 HTMLCollection）。
  • 表单属性（JavaScript）：
    • elements：表单内所有字段的集合（按 HTML 顺序）。
    • length：字段数量。
    • name：表单名称。
    • submit()：提交表单（不触发 submit 事件）。
    • reset()：重置表单（会触发 reset 事件，慎用）。
  • 提交按钮：<input type="submit">、<button type="submit">；普通按钮无提交行为。
  • 阻止表单提交：监听 submit 事件并调用 preventDefault()。

2. 表单字段（form.elements）

2.1 公共属性与方法

  • 所有表单字段（<input>、<button>、<textarea>、<select> 等）都继承自 HTMLElement，并共享以下属性：
    • disabled：禁用字段。
    • form：指向所属表单（只读）。
    • name：字段名称。
    • readOnly：是否只读（<input> 和 <textarea> 有效）。
    • tabIndex：Tab 键顺序。
    • type：字段类型（如 "text"、"checkbox"）。
    • value：字段的值（对 <select> 返回选中项的值）。
  • 公共方法：
    • focus()：聚焦到字段。
    • blur()：移除焦点。
  • 公共事件：
    • blur、change（值改变且失焦）、focus、input（值实时变化）。

2.2 文本框（<input type="text"> 与 <textarea>）

  • <textarea> 使用标签内容作为初始值，不能使用 value 属性设置。
  • 属性：
    • select()：选中文本框所有文本。
    • selectionStart / selectionEnd：选中文本的起始/结束索引。
    • setSelectionRange(start, end)：设置选中范围。
    • selectionDirection：选中方向（"forward"、"backward"、"none"）。
  • 监听 select 事件：当选中文本时触发。
  • 剪贴板事件：copy、cut、paste，可访问 clipboardData 对象。

2.3 输入过滤（常用技巧）

  • 限制字符：监听 keypress 事件，检查 String.fromCharCode(e.charCode) 并阻止非法输入。
  • 处理粘贴：监听 paste 事件，通过 clipboardData.getData('text/plain') 获取并验证。

2.4 约束验证 API（HTML5）

  • 必填字段：<input required>。
  • 类型约束：<input type="email">、<input type="url"> 等。
  • 数值范围：min、max、step。
  • 模式匹配：pattern="[0-9]{3}"。
  • 长度限制：maxlength。
  • 验证属性：
    • validity 对象：包含 valueMissing、typeMismatch、patternMismatch、tooLong、rangeUnderflow、rangeOverflow、stepMismatch、customError 等布尔属性。
    • validationMessage：验证失败时的消息。
    • willValidate：是否会被验证。
  • 自定义验证：
    • setCustomValidity(message)：设置自定义错误信息，若非空字符串则使字段无效。
    • checkValidity()：检查字段是否有效，无效触发 invalid 事件。
  • 全局验证：表单的 checkValidity() 检查所有字段，并返回布尔值。
  • 禁用验证：在 <form> 上添加 novalidate 属性。

3. 选择框（<select> 和 <option>）

3.1 HTMLSelectElement 属性与方法

  • options：HTMLCollection 包含所有 <option>。
  • selectedIndex：选中项的索引（未选中为 -1）。
  • value：当前选中项的值（若没有选中或选中项无 value 属性则返回空字符串）。
  • multiple：是否允许多选。
  • size：可见行数。
  • add(option, before)：添加选项。
  • remove(index)：移除选项。
  • 事件：change（当选中项变化时触发）。

3.2 HTMLOptionElement 属性

  • index：索引。
  • selected：是否选中。
  • text：选项文本。
  • value：选项的值。

3.3 操作选项

  • 创建选项：new Option(text, value) 返回 HTMLOptionElement。
  • 添加：select.add(option)。
  • 移除：select.remove(index) 或 select.options[index] = null。
  • 清空：select.length = 0。

4. 表单序列化与提交

  • 序列化：将表单字段编码为 URL 编码字符串（常用于 Ajax 提交）。
    • 规则：处理 name 和 value，对特殊字符编码，多个字段用 & 连接。
    • 提交按钮只有被点击才提交其值。
    • 复选框/单选框只包含选中的项。
    • 文件字段只包含文件名（不能发送文件内容）。
  • 自定义序列化：遍历 form.elements，忽略禁用字段、非提交按钮等。
  • 使用 FormData 类型（XMLHttpRequest Level 2）：
    • let fd = new FormData(form)：自动收集表单数据，支持文件上传。
    • 适合 Ajax 提交，不序列化表单。

5. 富文本编辑（contenteditable）

  • 给任意元素添加 contenteditable="true" 属性，使其成为可编辑区域。
  • 使用 document.execCommand() 执行格式化命令（已废弃，但仍广泛支持）：
    • 常用命令："bold"、"italic"、"forecolor"、"fontsize"、"createlink"、"insertimage" 等。
    • 用法：document.execCommand('bold', false, null)。
    • 检查命令是否可用：document.queryCommandEnabled(command)。
    • 获取命令状态：document.queryCommandState(command)（如加粗是否激活）。
  • 获取 HTML 内容：element.innerHTML。
  • 替代方案：使用 MutationObserver 监听变化，或现代框架的富文本组件。

6. 小结

  • 表单用 forms 集合，提交重置可拦截。
  • 字段常用 value disabled，focus 方法聚焦它。
  • 文本框选中 select()，selectionStart 记录选区的头尾。
  • 约束验证属性和 API，checkValidity 加 setCustomValidity。
  • 下拉框 options 集合，selectedIndex value 拿结果。
  • 富文本 contenteditable，execCommand 显神威。

7. 常见面试题速查

  1. 如何阻止表单提交？
    → 监听 submit 事件，调用 event.preventDefault()。

  2. <input type="text"> 与 <textarea> 的 value 属性有什么区别？
    → 文本框的 value 属性可直接读写；<textarea> 的初始值由其标签内容决定，但之后也可通过 value 读写。

  3. 如何获取文本框选中的文本范围？
    → 使用 selectionStart 和 selectionEnd，以及 setSelectionRange(start, end) 设置。

  4. 如何实现输入框只允许输入数字？
    → 监听 keypress 事件，检查 String.fromCharCode(e.charCode) 是否为数字，若不是则 preventDefault()。同时处理粘贴事件。

  5. HTML5 约束验证的 validity 对象包含哪些常见属性？
    → valueMissing（必填为空）、typeMismatch（类型不匹配）、patternMismatch（不满足模式）、tooLong（超长）等。

  6. setCustomValidity() 的作用是什么？
    → 设置自定义错误信息，使字段处于无效状态；传空字符串可清除错误，使字段有效。

  7. 如何动态添加/移除 <select> 中的选项？
    → 使用 select.add(option) 或 select.remove(index)；也可直接操作 select.options 集合。

  8. FormData 的用途？
    → 用于构造表单数据，方便通过 XMLHttpRequest 或 fetch 提交，支持文件上传。

  9. contenteditable 属性的作用？
    → 使元素可编辑，可用于实现富文本编辑器。

  10. document.execCommand 是否推荐使用？
    → 已废弃，但多数浏览器仍支持。新项目建议使用原生 contenteditable + 自定义命令或使用成熟的编辑器库（如 Quill、TinyMCE）。

posted @ 2024-05-07 11:13  Li_pk  阅读(6)  评论(0)    收藏  举报