• 可编辑div光标位置


    参考:

    https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection

    https://developer.mozilla.org/en-US/docs/Web/API/Selection/getRangeAt

    https://developer.mozilla.org/en-US/docs/Web/API/Selection/addRange

    MDN上提示这些API不稳定。应该是兼容IE9+,谷歌,火狐

    1. var sel = window.getSelection()  变量sel是当前页面被选中区域

    2. var objRange = sel.getRangeAt(0) 获得选中区域的range对象

       startOffset和endOffset代表了选中区域的起始位置和结束位置,相同时代表了光标位置

      anchorNode有2个值,一个是输入框节点,一个是文本text。

      anchorNode为输入框节点时,startOffset代表了在文本框中的位置,一段文字看成一个整体相当于只占一个位置,一个表情算一个位置。

    3. objRange.rangeCount表示选中区域的range对象数量
    4. sel.removeAllRanges()可以移除选中区域的range对象

    5. document.createRange()可以创建新的range对象

    6. sel.addRange(range)可以给选中区域添加range对象

    基本思路:

    当可编辑div失去焦点时,要记录当时的range对象,赋值给一个变量lastRange

    当可编辑div重新获得焦点,会有一个默认range对象,startOffset和endOffset都为0

    使用sel.removeAllRanges()可以移除选中区域的range对象

    使用sel.addRange(lastRange)可以给选中区域添加当时保存的lastRange对象

    别人家的详细解释和示例:https://segmentfault.com/a/1190000005869372

  • 相关阅读:
    内存溢出与内存泄漏
    Android性能优化系列之Bitmap图片优化
    android 内存泄漏,以及检测方法
    android view绘制流程 面试
    USACO milking cows
    USACO beads
    POJ3311 TSP问题 xingxing在努力
    HDU5074 dp xingxing在努力
    HDU2821 深搜 xingxing1024
    HDU5592 排队问题 xingxing在努力
  • 原文地址:https://www.cnblogs.com/BluceLee/p/12100026.html
Copyright © 2020-2023  润新知