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

【问题标题】：Hide textarea text but not blinking cursor隐藏文本区域文本但不闪烁光标
【发布时间】：2013-02-06 00:06:32
【问题描述】：

我试图模仿 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);
    }
});

【问题讨论】：

我想我需要知道你不只是使用contenteditable的原因。
我刚刚开始研究...到目前为止，我无法让该插件与contenteditable 一起使用。如果我只是自己做（从头开始编写所有代码），由于难以获得光标位置，似乎需要很长时间才能让它在 IE8+ 上工作......但我现在正在走这条路.
我花了一些时间尝试不同的东西，最后说服自己唯一的选择是编写自己的插入符号。这个问题stackoverflow.com/questions/8408041/… 有一个文本区域的完整工作代码。
@Plynx 如果您通过示例或指向如何使用contenteditable 的链接回答这个问题，我会接受这个作为我的答案。

标签： javascript jquery css twitter

【解决方案1】：

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

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

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

我不确定在不修改插件的情况下能完成多少，但是一旦进行了这些更改，您就不必担心光标会消失，因为不再需要为你隐藏textarea。

不过，您还没有走出困境，还需要做很多工作才能使解决方案变得健壮。

因此，我建议您查看Mentionator，它是一个 jQuery 插件，可以可靠地实现您想要的功能。它的源代码结构良好、易于理解且注释丰富，因此如果您想查看代码以了解插件和 Twitter 的扩展标记实用程序（很可能）如何工作，您应该拥有这样做没什么问题。

还有一件事，鉴于我是透明度的大力支持者，我想让您知道 Mentionator 确实由您维护 :)。

【讨论】：

【解决方案2】：

我的答案是使用contenteditablehttp://html5demos.com/contenteditable。这似乎不是 twitter 为他们的推文输入（其中提到突出显示）所做的，但我已经放弃了弄清楚他们是如何做到的。

【讨论】：

【解决方案3】：

我遇到了类似的问题，发现很难找到一个好的解决方案。我正在使用 span 标签将我自己的插入符号/光标实现到样式元素中，但这在将单词拆分到新行时存在一些问题。但是我找到了一个非常简单的解决方案，并且看到这是在谷歌上解决这个问题的第一件事，我会分享它，因为如果它在这里的话，这对我来说是几周前的理想选择！ :)

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

background: rgba( 0, 0, 0, 0.0 );
color: rgba( 0, 0, 0, 0.0 );
caret-color: rgba( 0, 0, 0, 1.0 );

【讨论】：