JavaScript div contenteditable="true" 如何获得焦点

tiseheaini · 2014年08月16日 · 最后由 tiseheaini 回复于 2014年08月18日 · 15516 次阅读

我将一个网站的编辑器换成了 Simditor ,现在要实现 @ 功能 将 @ 某用户的文字插入到 <div class="simditor-body" contenteditable="true"></div> 中,然后将光标移到输入框的最后位置。 现在我无法获得 div 的焦点,使用 $('classname').focus() 没有效果。 我看到 simditor.tower.im 在页面加载完后可以做到使 div 获得焦点,请教一下如何做到的。

共收到 7 条回复

需要用 Range 对象去操作.

#1楼 @saiga #2楼 @ichord 非常感谢你们的回答,答案已经找到,https://github.com/mycolorway/simditor/issues/89 现在在解决如何将光标移到输入框的最后面,有没有好的方法

用这种非主流插件建议还是直接看代码.....

var last = editor.body.find('p, li, pre, h1, h2, h3, h4, td').last();
editor.focus();
editor.selection.setRangeAfter(last);

#4楼 @saiga 非常感谢,虽然我找到了一种比较苦涩的方法解决了,不过还是用你得方式比较简洁。 下面是我找到的方法。

div = window.editor.body.find('p:eq(-1)')[0]
range = document.createRange()
len = window.editor.getValue().length
range.setStart(div, 1)
range.setEnd(div, 1)
getSelection().addRange(range)

@saiga @tiseheainisetRangeAtEndOf比较好:

var last = editor.body.find('p, li, pre, h1, h2, h3, h4, td').last();
editor.focus();
editor.selection.setRangeAtEndOf(last);
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册