红宝书 笔记14

[pma934]

有道云

表单脚本

• 提交表单 <input type="submit" value="Submit Form">
• 重置表单 <input type="reset" value="Reset Form">

elements 该属性是表单中所有表单元素的集合

//每个表单字段

focus() 获得焦点

blur() 失去焦点

文本框脚本

• 单行 <input type="text" size=" " maxlength=" " value="init value">
• 多行 <textarea rows=" " clos=" ">init value</textarea>

过滤输入

通过设置keypress事件

==操作剪切板==

• beforecopy
• copy
• beforecut
• cut
• beforepaste
• paste

HTML5约束验证API

• required 必填项

• 输入类型

  • email
  • password
  • url
  • 数值类型 这类可以指定min max step属性
    • number
    • range
    • date
    • month
    • week
    • time
    • datetime
    • datetime-local
  • search
  • color

新增pattern属性，可以使用正则表达式进行约束 <input type="text" pattern="\d+" name="count">

检测有效性

使用checkValidity()方法可以检测表单中的某个字段是否有效。是否有效的判断依据是一些<input>的约束条件。

• checkValidity() 表单验证方法

常用绑定事件

• keypress
• change
• blur

==富文本选区==

==DOM选区在红宝书12章 DOM范围==

下面使用的的Range就是DOM选区

范围选择（） window.getSelection()或者document.getSelection() 建

Selection对象属性:

• anchorNode 返回该选区起点所在的节点（Node）。
• anchorOffset 返回一个数字，其表示的是选区起点在 anchorNode 中的位置偏移量。 如果 anchorNode 是文字节点，那么返回的就是从该文字节点的第一个字开始，直到被选中的第一个字之间的字数（如果第一个字就被选中，那么偏移量为零）。 如果 anchorNode 是一个元素，那么返回的就是在选区第一个节点之前的同级节点总数。(这些节点都是 anchorNode 的子节点)
• focusNode 返回该选区终点所在的节点。
• focusOffset 返回一个数字，其表示的是选区终点在 focusNode 中的位置偏移量。 如果 focusNode 是文字节点，那么选区末尾未被选中的第一个字，在该文字节点中是第几个字（从0开始计），就返回它。 如果 focusNode 是一个元素，那么返回的就是在选区末尾之后第一个节点之前的同级节点总数。

Selection对象方法:

• isCollapsed 返回一个布尔值，用于判断选区的起始点和终点是否在同一个位置。
• rangeCount 返回该选区所包含的连续范围的数量。
• getRangeAt 返回选区开始的节点（Node）。
• collapse 将当前的选区折叠为一个点。
• extend 将选区的焦点移动到一个特定的位置。
• modify 修改当前的选区。
• collapseToStart 将当前的选区折叠到起始点。
• collapseToEnd 将当前的选区折叠到最末尾的一个点。
• selectAllChildren 将某一指定节点的子节点框入选区。
• addRange 一个区域（Range）对象将被加入选区。
• removeRange 从选区中移除一个区域。
• removeAllRanges 将所有的区域都从选区中移除。
• deleteFromDocument 从页面中删除选区中的内容。
• selectionLanguageChange 当键盘的朝向发生改变后修改指针的Bidi优先级。
• toString 返回当前选区的纯文本内容。
• containsNode 判断某一个node是否为当前选区的一部分。

document.execCommand

当一个HTML文档切换到设计模式时，document暴露 execCommand 方法，该方法允许运行命令来操纵可编辑内容区域的元素。

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

一个 Boolean ，如果是 false 则表示操作==不被支持==或==未被启用==。

注意：在调用一个命令前，不要尝试使用返回值去校验浏览器的兼容性

比如,复制选区(选区就是上面介绍的 ==window.getSelection()== 或者==document.getSelection()== )

document.execCommand('copy')

属性和方法具体见：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand

Range补充笔记

在document中可以使用document.createRange()创建一个选区，也可以new Range()创建

也可以用Selection对象的getRangeAt方法取得

属性

• Range.collapsed 只读 返回一个用于判断 Range 起始位置和终止位置是否相同的布尔值。
• Range.commonAncestorContainer 只读 返回包含 startContainer 和 endContainer 的最深的节点。
• Range.endContainer 只读 返回包含 Range 终点的节点。
• Range.endOffset 只读 返回 endContainer 中表示Range终点位置的数字。
• Range.startContainer 只读 返回包含 Range 开始的节点。
• Range.startOffset 只读 返回 startContainer 中表示 Range 起始位置的数字。

方法

定位方法

我们没有在此列举继承方法。

• Range.setStart() 设置 Range 的起点。
• Range.setEnd() 设置 Range 的终点。
• Range.setStartBefore() 以其它节点 （ Node）为基准，设置 Range 的起点。
• Range.setStartAfter() 以其它节点为基准，设置 Range 的始点。
• Range.setEndBefore() 以其它节点为基准，设置 Range 的终点。
• Range.setEndAfter() 以其它节点为基准，设置 Range 的终点。
• Range.selectNode() 设定一个包含节点和节点内容的 Range 。
• Range.selectNodeContents() 设定一个包含某个节点内容的 Range 。
• Range.collapse() 向指定端点折叠该 Range 。

编辑方法

通过以下方法，可以从 Range 中获得节点，改变 Range 的内容。

• Range.cloneContents() 返回 Range 当中节点的文档片段（DocumentFragment）。
• Range.deleteContents() 从文档（Document）中移除 Range 中的内容。
• Range.extractContents() 把 Range 的内容从文档树移动到文档片段中。
• Range.insertNode() 在 Range 的起点处插入节点。
• Range.surroundContents() 将 Range 的内容移动到一个新的节点中。

示例

选中全文（相当于在浏览器按ctrl+a）

var select = document.getSelection()
var range = document.createRange()
range.selectNode(document.body)
select.addRange(range)

或者

必须要已经有选中区域才行，不然var range = select.getRangeAt(document.body)会报错,但是省去了插入区域到选区的步骤

var select = document.getSelection()
var range = select.getRangeAt(document.body)
range.selectNode(document.body)