Ruby China

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

tiseheaini · 2014年08月16日 · 最后由 wangyujun520 回复于 2019年09月06日 · 29414 次阅读

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

ichord #2 2014年08月16日

需要用 Range 对象去操作。

tiseheaini #3 2014年08月16日

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

saiga #4 2014年08月16日

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

var last = editor.body.find('p, li, pre, h1, h2, h3, h4, td').last();
editor.focus();
editor.selection.setRangeAfter(last);
tiseheaini #5 2014年08月16日

#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)
farthinker #6 2014年08月18日

@saiga @tiseheaini 用setRangeAtEndOf比较好：

var last = editor.body.find('p, li, pre, h1, h2, h3, h4, td').last();
editor.focus();
editor.selection.setRangeAtEndOf(last);
wangyujun520 #8 2019年09月06日

editor 是什么？

用 JS 或者 jQuery 怎么获取焦点呢 $("#edit").focus();//这样不起作用

wangyujun520 #9 2019年09月06日

怎么获取焦点呢 $("#edit").focus();不起作用

需要 登录 后方可回复, 如果你还没有账号请 注册新账号