Facebookがどのように機能するかを調べようとしています。私は彼らがコメントやステータス機能でテキストエリアを使用していることを知っていますが、投稿などに誰かをタグ付けすると、明るい青色の背景を持つテキストエリアのテキストの選択が強調表示されます。私はtextareaのことを知っているか、最後に私は少なくともこの種の要素では不可能だったことを知っていたので、どうやってそれをやっているのですか？どのようなテクニックですか？誰もが考えている？どのように行われているかについては、いくつかの煙や鏡の上で銀行取引をしていますが、jQueryまたはJavaScriptテキストエリアで選択したテキストを強調表示する方法
何らかの形でtextareaを使用していますが、大部分の魔法はdivとCSSで行われます。私は、Safariのウェブインスペクタからこれを引っ張っ：
<div class="inputContainer">
<div class="uiMentionsInput" id="up84fa_5">
<div class="highlighter" style="direction: ltr; text-align: left; ">
<div style="width: 499px; ">
<span class="highlighterContent"><b>Brandan Lennox</b> is the coolest.</span>
</div>
</div>
<div class="uiTypeahead composerTypeahead mentionsTypeahead" id="up84fa_9" style="height: auto; ">
<div class="wrap">
<input type="hidden" autocomplete="off" class="hiddenInput">
<div class="innerWrap">
<textarea class="uiTextareaAutogrow input mentionsTextarea textInput" title="What's on your mind?" name="xhpc_message_text" placeholder="What's on your mind?" onfocus="return wait_for_load(this, event, function() {if (!this._has_control) { new TextAreaControl(this).setAutogrow(true); this._has_control = true; } return wait_for_load(this, event, function() {JSCC.get('j4f3584ff4f90d07867222385').init(JSCC.get('j4f3584ff4f90d07867222386'));;JSCC.get('j4f3584ff4f90d07867222386').init(["buildBestAvailableNames","hoistFriends"]);JSCC.get('j4f3584ff4f90d07867222383').init({"max":10}, null, JSCC.get('j4f3584ff4f90d07867222385'));;;});});" autocomplete="off" style="height: 48px; direction: ltr; ">What's on your mind?</textarea>
</div>
</div>
</div>
<input type="hidden" autocomplete="off" class="mentionsHidden" name="xhpc_message" value="@[815490222:Brandan Lennox] is the coolest.">
</div>
<div class="attachmentMetaArea"></div>
</div>
重要な要素：
div.highlighter
span.highlighterContentを。強調表示されたコンテンツとしてb要素をスタイルすることに注意してください。textarea要素の乱雑なonfocusハンドラです。その中のどこかに、textareaコンテンツ自体が更新されていないため、TextAreaControlオブジェクトが作成されます。これはDOM内の別の場所にオブジェクトを作成するようです。input[type=hidden].mentionsHiddenは、カスタムデータをサーバーに送信して、実際にあなたが誰と言及したのかを認識します。これは完全にFacebook固有のものですが、多分それはあなたに何をしたいかについてのいくつかのアイデアを提供します。
古典的なテキストエリアを使用していません。私はそれが狂った音だと知っていますが、あなたが入力すると、キーワードを強調表示したり入力を移動したりすることができるhtmlが生成されます。あなたはFirebugでリアルタイムでどうなるかを見るために見ることができます。
Firebugはテキストエリアを表示しますが、おそらくそれは魔法のように生成されたHTMLの事の裏に隠されていますか？確かにクレイジー。 – Domenic
さて、これは私の質問の基礎です、twitter、linkedin、facebook、これと同じような機能を持つ他の同様のエンティティでファイアーバグを探して、古典的なtextareaタグを見ています。しかし、あなたの演出を聞いた後、それはいくつかの意味があります、あなたはそれに焦点を当ててdivを推測するImは、この隠されたテキストエリアに焦点を当てて、textareaはキーイベントを使ってdivのhtmlに入力するものを反映します.. @記号などの他のものをトリガする – chris
私はこれを行うためのhtml5デモに基づいて例を取り上げました。それを確認してくださいhttp://jsfiddle.net/KStst/これはセクションを編集可能にするようブラウザに指示するだけで、基本的なhtml機能を理解しています。これはおそらくFacebookがそれをやっている方法ではありませんが、html5が "未来"であるとすればそれはおそらく遊ぶ価値があります。
おそらくcontenteditableを使用しています（http://html5demos.com/contenteditableを参照）。これにより、テキストの一部の背景を変更することができます – dstarh
@dstarh興味深いのは、実際にはそうでないということです。 – Domenic
正直、私は@ mazzucciの答えを見ました。私はまだcontenteditableを使うと同じ効果が得られると思います。 – dstarh