微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何在包含内容的可编辑div中设置插入符号位置?

如何解决如何在包含内容的可编辑div中设置插入符号位置?

我需要一个脚本来将contenteditable div的插入符号放在最后键入的字符之后。

仅键入一个字符是行不通的,因为我还有其他脚本处理CJK字符转换,因此在每个innerHTML事件中都更改了div的onInput(因此每次都重置插入符号的位置)

我正在使用此SO answer中的代码获取插入符号在contenteditable div内部的当前位置。

我将根据上面的代码生成的插入符号位置存储在浏览器的localStorage中。

每当我需要将插入符号位置设置在所需位置时,我都会调用以下函数,其中pos是存储的值+ 1:

  function setCursor(pos) {
    var tag = document.getElementById("editableDiv");
    var setpos = document.createrange();
    var set = window.getSelection();
    setpos.setStart(tag.childNodes[0],pos);
    setpos.collapse(true);
    set.removeAllRanges();
    set.addRange(setpos);
    tag.focus();
  }

对于div中的所有文本,直到第一个孩子,一切都工作正常。从此以后,它不再起作用,并且在控制台中出现以下错误

Uncaught DOMException: Index or size is negative or greater than the allowed amount

我还尝试将this other similar SO post中的function showCaretPos()的{​​{1}}更改。但是,再次,它从第一个孩子开始停止工作,这次出现错误function SetCaretPosition(el,pos)

无论子元素是否存在,我如何解决此问题?

Here is my code

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。