Javascript 设置contenteditable html div的光标位置_Javascript_Jquery_Contenteditable_Caret_Cursor Position

Javascript 设置contenteditable html div的光标位置

javascript jquery

Javascript 设置contenteditable html div的光标位置,javascript,jquery,contenteditable,caret,cursor-position,Javascript,Jquery,Contenteditable,Caret,Cursor Position,我试图在contenteditable html div中设置光标位置但是错误：IndexSizeError:Index或size为负数或大于允许的金额我正在为contenteditable区域开发一个音译工具小提琴： $（'#可编辑'）。单击（函数（）{ var range=window.getSelection（）| | document.getSelection（）| | document.selection.createRange（）； var start=范围.anchorOf

我试图在contenteditable html div中设置光标位置但是错误：

IndexSizeError:Index或size为负数或大于允许的金额

我正在为contenteditable区域开发一个音译工具

小提琴：


$（'#可编辑'）。单击（函数（）{
var range=window.getSelection（）| | document.getSelection（）| | document.selection.createRange（）；
var start=范围.anchorOffset；
var end=range.focusOffset；
var element=document.getElementById（'editable'）；
var selection=document.getSelection（）；
var newrange=document.createRange（）；
newrange.setStart（element.firstChild，start）；
newrange.setEnd（element.firstChild，end）；
selection.removeAllRanges（）；
selection.addRange（新范围）；
});
Lorem ipsum dolor sit amet，献祭精英
所有人都能清楚地看到错误所在的地方
但是，对于所有人来说，真正的发明家和准建筑师必须解释自己的生活。尼莫·埃尼姆·伊普萨姆·沃鲁帕特（Nemo enim ipsam Voluptate）是一个真正的沃鲁帕特（Voluptate），他是一个真正的消费者
Magni dolores eos qui qui qui qui qui qui qui qui QUEvoluptatem sequi nesciunt。最重要的一点是，在劳动和就业领域，所有人都有自己的权利、义务和义务
但是最低限度的成本，是否需要在实验室中进行实际操作，是否需要从消费品中获得流动性？在一个没有法律约束的环境中，所有人都有自己的权利，所有人的权利都是无效的

您想在可编辑的div中设置光标的确切位置吗？@新手字面上说，我想设置光标的位置。我正在为音译工具做一些字符替换。其中英文文本“hum”音译为“hum”हम' （说）。由于两个字符长度不同，我将计算替换的字符串长度，可能小于或大于一个位置，并将光标位置设置在替换字符的末尾以继续键入。我可以为textarea实现这一点，但不确定如何在ContentEditable上设置光标在editable div中的确切位置？@Nearroid，我想设置在它所在的位置。我正在为音译工具做一些字符替换。其中英文文本“hum”音译为“hum”हम' （说）。由于两个字符长度不同，我将计算替换的字符串长度，可能小于或大于一个位置，并将光标位置设置在替换字符的末尾以继续键入。我可以为textarea实现这一点，但不确定如何在contenteditable上实现

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
  <script type='text/javascript'>
    $('#editable').click(function () {

            var range = window.getSelection() || document.getSelection() || document.selection.createRange();
            var start = range.anchorOffset; 
            var end = range.focusOffset;
            var element = document.getElementById('editable');
         var selection = document.getSelection();
         var newrange = document.createRange();
         newrange.setStart(element.firstChild, start);
         newrange.setEnd(element.firstChild, end);
         selection.removeAllRanges();
         selection.addRange(newrange);
    });

  </script>
</head>
<body>

<div class="editable" id="editable" class="thumbnail value" contenteditable="true" style="width:500px;border:3px solid #ddd;padding:10px;margin:0 auto;">
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2> 
<p>Sedut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p>
<p>tTotam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur</p>
<p><strong>Magni dolores eos qui ratione</strong> voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur</p>

    </div>

</body>

</html>