内容可编辑元素中的标签式自动补全和插入符/光标移动. [英] Tag-like autocompletion and caret/cursor movement in contenteditable elements.

问题描述

我正在开发一个jQuery插件，它将允许您执行@username样式标签，就像Facebook在其状态更新输入框中所做的那样.
我的问题是，即使经过数小时的研究和实验，似乎也很难简单地移动插入符号.

我设法给@tag加上了某人的名字，但是将插入符号放在火箭科学之后，特别是如果它应该在所有浏览器中都可以使用的话.
而且我什至还没有考虑用标签替换键入的@username文本，而不是像我现在所做的那样只是注入它.

关于在Stack Overflow和Google上使用contenteditable的内容有很多问题，我想我已经阅读了所有内容，但是它们并没有真正满足我的需求.因此，任何人都可以提供的更多信息将是很棒的:)

I''m working on a jQuery plugin that will allow you to do @username style tags, like Facebook does in their status update input box.
My problem is, that even after hours of researching and experimenting, it seems REALLY hard to simply move the caret.

I''ve managed to inject the @tag with someone''s name, but placing the caret after it seems like rocket science, specially if it''s supposed work in all browsers.
And I haven''t even looked into replacing the typed @username text with the tag yet, rather than just injecting it as I''m doing right now.

There''s a ton of questions about working with contenteditable on Stack Overflow & google so much contents, and I think I''ve read all of them, but they don''t really cover properly what I need. So any more information anyone can provide would be great :)

推荐答案

不要沉迷于jQuery，直接使用JavaScript即可正常工作.

以下是设置光标位置的代码段:
通过Javascript获取/设置文本框中的光标位置

希望这可以帮助.

干杯.

顺便说一句:要删除@username，只需在确定光标位置之前进行字符串替换即可.

Don''t hem yourself in with jQuery, straight-up JavaScript will work fine.

Here''s a snippet on setting the cursor position:
Get/Set Cursor position in textbox by Javascript

Hope this helps.

Cheers.

btw: for removing the @username, just do a string replace prior to figuring out where you''re setting the cursor location.

这篇关于内容可编辑元素中的标签式自动补全和插入符/光标移动.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！