Question

我正在尝试模仿Twitter在撰写推文时如何突出显示用户。

我正在使用mentionsInput jQuery plugin。我想更改@screen_name的颜色，而不是像插件默认更改背景颜色。

有没有办法为@screen_name上色并仍然在末尾显示闪烁的光标？

我能够做到这一点，但我需要隐藏textarea文本，因此它不会使CSS样式的文本变暗...但是它隐藏了我不想做的闪烁光标。

请参阅我的jsFiddle显示问题：http://jsfiddle.net/thhbe/1/

或看到它......

必需：jQuery，Underscore.js和插件。

HTML：

<div><textarea id="tweet_textarea" class="mention textarea compose_text"></textarea></div>

JS：

/*
* Add handlers to HTML elements and set options....
*/
$('textarea.mention').mentionsInput({
    onDataRequest:function (mode, query, callback) {
        var data = [
            { id:1, name:'Kenneth Auchenberg', 'avatar':'http://goo.gl/SUCm1', 'type':'contact' },
            { id:2, name:'Jon Froda', 'avatar':'http://goo.gl/SUCm1', 'type':'contact' },
            { id:3, name:'Anders Pollas', 'avatar':'http://goo.gl/SUCm1', 'type':'contact' }
        ];

        data = _.filter(data, function(item) { return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1 });

        callback.call(this, data);
    }
});

Answer 1

我迟了几年，但希望我能为你的问题提供一个实际的答案。

你（或插件）有了正确的想法...利用另一个元素（“传真元素”），其中包含textarea中文本的样式版本。只需要进行一些更改：

fascimile元素应该具有相同的尺寸（整个元素及其内容区域），形状和位置textarea
fascimile元素应该放在下面 textarea而不是顶部。
textarea的背景应该是透明的。
fascimilie元素的文本和边框应该是透明的。

我不确定在没有修改插件的情况下可以完成多少工作，但是一旦做出这些更改，您就不必担心光标消失，因为不再需要让你隐藏textarea。

尽管如此，你还没有走出困境，还需要做更多的工作才能使解决方案更加强大。

所以我建议你查看Mentionator，它是一个jQuery插件，可以强大地实现你想要的功能。它的源代码是一个结构良好，易于理解和大量注释的，所以你是否应该查看代码以了解插件和Twitter的标记实用程序（最有可能）是如何工作的，你应该有这样做很麻烦。

还有一件事，鉴于我是透明度的大力支持者，我想告诉你，Mentionator是由你自己维护的:)。

Answer 2

我的答案是使用contenteditable http://html5demos.com/contenteditable。这似乎并不是Twitter为推特输入做了这样的事情（其中提到了突出显示），但我已经放弃了弄清楚他们是如何做到这一点的。

Answer 3

我遇到了类似的问题，发现很难找到一个好的解决方案。我正在使用span标签将自己的插入/光标实现到样式元素中，但是这会将字词拆分到新行上。但我找到了一个非常简单的解决方案，因为这是谷歌首先要解决这个问题，我会分享它，因为如果它在这里，这对我来说几周前是理想的！：）

如上所述，解决方案是将样式元素放在文本输入下面。您需要使文本输入具有alpha = 0背景和颜色。颜色也隐藏了插入符号。但是有专门针对插入符号的CSS属性，您可以使用取消隐藏它：

var table = $('#example2').DataTable();

    table.rows().invalidate().draw();

隐藏文本区域文本但不闪烁光标

3 个答案: