隱藏文本區域文本，但光標不閃爍

Question

我試圖模擬在撰寫推文時，當@提及用戶時，twitter如何突出顯示用戶。

我使用的是saysInput 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);
    }
});

Answer 1

我遲了幾年，但希望我能為您的問題提供實際的答案。

您（或插件）的想法正確了……利用另一個元素（“傳真元素”），該元素包含textarea本的樣式化版本。 只需進行幾處更改：

1. 的摹本元件被認為具有相同的尺寸（該元件作為一個整體，以及其內容區域），形狀和位置作為textarea
2. fascimile元素應該放置在 textarea 下方而不是其頂部 。
3. 應該將textarea的背景設為透明。
4. fascimilie元素的文本和邊框應該設置為透明。

我不確定在不修改插件的情況下可以完成多少操作，但是一旦進行了這些更改，您就不必擔心光標消失了，因為您將不再需要隱藏textarea 。

但是，您還沒有走出困境，要使該解決方案更強大，還需要做很多事情。

因此，我建議您查看Mentionator ，它是一個jQuery插件，可以可靠地實現您所需的功能。 它的源代碼結構合理，易於操作且注釋豐富，因此，如果您想查看一下代碼以了解插件以及Twitter的擴展實用程序（很有可能）的工作方式，則應該擁有這樣做有點麻煩。

還有一件事，鑒於我非常支持透明性，所以我想告訴您，Mentionator確實是由您維護的:)。

Answer 2

對我來說，答案是使用contenteditable http://html5demos.com/contenteditable 。 看來，這不是Twitter在其tweet輸入中所做的（突出顯示了這些內容），但是我已經放棄了弄清楚他們是如何做到的。

Answer 3

我遇到了類似的問題，發現很難找到一個好的解決方案。 我當時使用span標簽將自己的插入符號/光標實現到樣式元素中，但是在將單詞拆分為新行時存在一些問題。 但是我發現了一個非常簡單的解決方案，因為這是Google在此問題上的第一件事，我將與大家分享，因為如果在這里，這對我來說是理想的！ :)

如前所述，解決方案是將樣式元素放置在文本輸入下方。 您需要使文本輸入具有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 );