1

ツイートを作成するときにユーザーが@言及されたときに、Twitterがユーザーをどのように強調するかをエミュレートしようとしています。

私はmentationsInputjQueryプラグインを使用しています。プラグインのデフォルトのように背景色を変更するのではなく、@screen_nameの色を変更したいと思います。

@screen_nameに色を付けても、最後に点滅するカーソルを表示する方法はありますか？

私はそれを行うことができましたが、CSSスタイルのテキストを暗くしないようにtextareaテキストを非表示にする必要があります...しかし、それは私がしたくない点滅しているカーソルを非表示にします。

問題を示している私の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。行う必要のある変更は2つだけです。

  1. ファクシミリ要素は、同じ寸法（要素全体とそのコンテンツ領域）、形状、および位置を持っていると想定されています。textarea
  2. ファクシミリ要素は、その上ではなく下に配置されることになっています。textarea
  3. の背景はtextarea透明にすることになっています。
  4. fascimilie要素のテキストと境界線は透明になっているはずです。

プラグインを変更せずにこれをどれだけ実行できるかはわかりませんが、これらの変更を行うと、カーソルが消えることを心配する必要がなくなります。を非表示にしtextareaます。

あなたはまだ森から出ていませんが、ソリューションを堅牢にするためにやらなければならないことがたくさんあります。

したがって、必要な機能を堅牢に実装するjQueryプラグインであるMentionatorを確認することをお勧めします。そのソースコードはよく構造化されており、わかりやすく、コメントも豊富です。そのため、プラグインと、拡張機能によるTwitterのタグ付けユーティリティ（ほとんどの場合）がどのように機能するかを理解するためにコードを確認する必要があります。そうするのに少し問題があります。

もう1つ、私は透明性の大きな支持者であるため、Mentionatorは本当にあなたによって維持されていることをお知らせしたいと思います:)。

于 2016-07-03T01:58:31.130 に答える
0

私にとっての答えは、contenteditable http：//html5demos.com/contenteditableを使用することです。これがツイッターが彼らのツイート入力（ハイライトされた言及を持っている）に対してそれを行った方法ではないようですが、私は彼らがそれをどのように行ったかを理解することをあきらめました。

于 2013-03-14T16:59:15.343 に答える
0

私も同様の問題を抱えていて、良い解決策を見つけるのは難しいと感じました。私は自分のcaret/カーソルを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 );
于 2017-12-29T13:41:25.777 に答える