1

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

我正在使用提及输入 jQuery 插件。我想更改@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);
    }
});
4

3 回答 3

1

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

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

  1. 分册元素应该具有与textarea
  2. 传真元素应该放置在它的下面textarea而不是它的上面。
  3. 的背景textarea应该是透明的。
  4. fascimilie 元素的文本和边框应该是透明的。

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

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

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

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

于 2016-07-03T01:58:31.130 回答
0

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

于 2013-03-14T16:59:15.343 回答
0

我遇到了类似的问题，发现很难找到一个好的解决方案。我正在使用 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 );
于 2017-12-29T13:41:25.777 回答