jQuery или JavaScript, как выделить выделенный текст в текстовом поле

Question

Я пытаюсь понять, как это делает Facebook. Я знаю, что они используют комментарии и статусы textarea, но если я помечаю кого-то в сообщении или что-то в этом роде, он будет выделять выделение текста в текстовом поле со светло-голубым фоном. Я знаю, что textarea или последнее я знал, по крайней мере, что это невозможно с этим типом элемента, так как они это делают? Какая техника? у кого есть идея? Я беру на себя какой-то дым и зеркала относительно того, как это делается, но не знаете, как это сделать?

Answer 1

В некоторой степени используется textarea, основная часть магии выполнена с помощью div и CSS. Я вытащил это из Web Inspector в 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([&quot;buildBestAvailableNames&quot;,&quot;hoistFriends&quot;]);JSCC.get('j4f3584ff4f90d07867222383').init({&quot;max&quot;: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 как выделенный контент.
• The messy onfocus обработчик для фактического textarea элемент. Где-то там, он создает объект TextAreaControl, который, кажется, создает объект где-то еще в DOM, так как сам контент textarea не обновляется.
• input[type=hidden].mentionsHidden, который отправляет пользовательские данные на сервер, чтобы он знал, кого вы упомянули.

Это полностью зависит от Facebook, но, возможно, это дает вам некоторые идеи относительно того, что вы хотели бы сделать.

Answer 2

Это не делается с использованием классического текстового поля. Я знаю, что это звучит безумно, но по мере ввода он генерирует html, где он может выделять/выделять ключевые слова и перемещать входные данные, чтобы у вас было место для ввода. Вы можете взглянуть на Firebug, чтобы узнать, как это происходит в режиме реального времени.

Answer 3

Я разработал пример, основанный на демонстрации html5, которая позволяет вам это делать. Проверьте это http://jsfiddle.net/KStst/ Это просто говорит браузеру сделать редактируемый раздел, и он понимает основные функции html. Вероятно, это не так, как facebook делает это, но учитывая, что html5 - это «будущее», с которым, вероятно, стоит поиграть.