Skip to content

how to set caret pos in contentEditable element

Harold.Luo edited this page Feb 24, 2014 · 1 revision

if you want to set caret pos in contentEditable element, you have to go though all children element to find that position. At least this the way i can found.

and here is the example, just go thought the DOM tree by 2 level.

    setPos: (pos) ->
      _pos = pos
      if oWindow.getSelection
        range = oDocument.createRange()
        for node in @domInputor.childNodes
          range.selectNode(node)
          range_content = range.toString()
          if _pos > range_content.length
            _pos -= range_content.length
            continue
          if node.childNodes.length > 0
            _node = $(":contains('"+range_content+"')", node)[0]
            range.setStart(_node?.lastChild || node.lastChild, _pos)
          else
            range.setStart(node, _pos)
          range.collapse(true)
          sel = oWindow.getSelection()
          sel.removeAllRanges()
          sel.addRange(range)
          break

      @domInputor

Clone this wiki locally