zoukankan      html  css  js  c++  java
  • selection与range笔记

    selection对象代表当前激活选中区,通常是高亮的文本块

    创建选中区:

    1.拖拽文本

    2.脚本创建 cerateRange()

    获取selection对象

    IE     document.selection()

    非IE  window.getSelection()

    eg:

    <div>请选中这里的部分文字。</div>
    <div>
        <input type="button" value="加粗" onclick="select()" />
    </div>

    <script>
        function select() {
            var a = window.getSelection();
            console.log(typeof a.anchorNode);
        }
    </script>

    输出Selection对象

    属性:

    anchorNode:包含起点的节点,不存在则为null(注意一段文本就是一个节点!包括p内的文本,a,div等标签内的文本,不包括输入框内的文本!!

    anchorOffset:起点在anchorNode中的偏移量

    focusNode:包含结束点的节点,不存在则为null

    focusOffset:结束点在focusNode中的偏移量,focusOffset可以比anchorOffset小,只要从后向前选择

    isCollapsed:起点和结束点是否重合

    rangeCount:selection中range的数目,一般一个,ctrl键配合多个

     -------------------------------------------------------------------------------------------------------------------------------------

    方法:

    1.getRangeAt(index)

    从当前selection中获取某一个range对象

    2.collapse(parentNode, offset)

    开始和结束点合并到parentNode的offset位置,多用于改变可编辑div的焦点,,,

    3.extend(parentNode, offset)

    结束点移动到parentNode的offset位置

    4.collapseToStart()

    将结束点移动到selection的起点,注意是selection的起点而不是开始点,意味着只会向前不会向后,多用于取消选中状态,多个range时也是如此

    5.collapseToEnd()

    将开始点移动到selection的结束点

    6.selectAllChildren(parentNode)

    将parentNode的所有后代变成selection,原有的selection被抛弃,可用于全选

    7.addRange(range)

    将range添加到selection中注意chrome中只能有一个range

    8.removeRange(range)

    从selection中移除range

    兼容性:不佳,亲测只有IE可以

    9.removeAllRanges()

    移除所有的range,多用于取消选择状态

    10.toString()

    返回selection的纯文本,也就是返回选中区域的文本内容

    11.containsNode(aNode,aPartlyContained)

    判断一个节点是不是selection的一部分

    aNode要判断的节点

    aPartlyContained true 只要有一部分属于就返回true  false 全部属于才返回true

    --------------------------------------------------------------------------------------------------------------

    --------------------------------------------------------------------------------------------------------------

    range对象:

    属性:

    collapsed:此Range对象代表的区域开始点和结束点是否已合并

    commonAncestorContainer:此Range对象代表的整体区域位于哪个节点(元素或一段文本)

    startContainer:此Range对象的开始点位于哪个节点

    startOffset:返回此Range对象代表的区域的起点在startContainer中的位置,返回整数

    endContainer:此Range对象的结束点位于哪个节点

    endOffset:返回此Range对象代表的区域的结束点在endContainer中的位置

    方法:

    document.createRange() 创建Range对象

    Range初始化

    selectNode(node) 选择文档的一部分

    将整个node节点的信息,包括node本身填充进Range

    selectNodeContents(node)

    将整个弄的节点内的信息,不包括node本身,填充进Range

    值得注意的是,用脚本创建Range不会像手动一样使选中部分变蓝!

    操作Range

    deleteContents()

    从文档中彻底删除Range区域的内容

    extractContants()

    从文档中提取Range区域的内容,返回值为提取的内容,可以对返回值进行操作,例如插入页面其他地方

    cloneRange()

    复制Range区域

    detach()

    分类该区域

    -----------------------------------------------------------------------------------------------------------------------

    低版本IE兼容

    创建Range (低版本IE只支持文本Range)

    document.body.createRange()

    初始化

    findText(string)

    找到第一次出现的给定文本,并将范围移过来环绕文本。如果找到文本返回true,否则返回false.

    eg: var a= document.body.createRange();

      a.findText("选中此文本");

      alert(a.text);

    高版本无需此法,不多解释

    详情请看:http://www.cnblogs.com/zourong/p/4800922.html

  • 相关阅读:
    java中一个类中没有公共的构造方法,则说明不能让外界去new对象。
    PyQt IDE 环境搭建
    移动App开发基本技术面
    创业公司的技术管理
    软件工程师职业道德规范和实践要求
    比较好的刷题网站推荐
    对于程序员在boss直聘求职的建议
    cocospod 安装和使用
    TabBarController和其他view无法建立Relationship segue的原因
    面试与反面试的一些问题
  • 原文地址:https://www.cnblogs.com/yanze/p/6001951.html
Copyright © 2011-2022 走看看