jQuery добавленный текст невидим

Question

Я пытаюсь создать пару кнопок над текстовой областью для вставки некоторого HTML-кода - ОЧЕНЬ плохого редактора HTML. У меня есть пара элементов INPUT, и я использую jQuery для установки обработчика щелчков, который будет вызывать функции jQuery append() или html() или text().

Обработчик срабатывает, он показывает предупреждение об отладке (), но текст, который я пытаюсь добавить, не отображается в текстовой области. Когда я проверяю текстовую область в Firebug, я вижу текст, который добавляю как дочерний элемент текстовой области, но он тусклый, как, например, когда для стиля элемента установлено отображение: нет. Но CSS-инспектор Firebug не показывает никаких изменений в свойствах отображения или видимости.

Когда я устанавливаю обработчик клика на 'append ()', а затем нажимаю несколько раз, в Firebug я вижу текст, добавляемый снова и снова, но каждый новый фрагмент все еще невидим. Если я выберу «Редактировать HTML» в Firebug, а затем введу несколько символов рядом с добавленным текстом, весь текстовый блок - текст, добавленный jQuery, и материал, добавленный в Firebug, - внезапно появятся.

Это также происходит, если я не использую обработчик щелчков, а вызываю функцию добавления, используя встроенный обработчик, такой как onclick="javascript:insert('bold');"

Кто-нибудь знает, почему добавленный текст не отображается?

Вот соответствующий код:

HTML:

<input type='button' id='bold' value='B' onclick='javascript:insert("bold")' />

<textarea name='PersonalGreeting' id='PersonalGreeting'>default text</textarea>

Javascript:

function insert( cmd )  {
    switch ( cmd )  {
        case 'bold':
            $('#PersonalGreeting').append('<b>bold text here</b>');
            break;  
    }
}

Answer 1

Я бы предположил, что jQuery пытается добавить элементы HTML DOM к textarea.

Попробуйте использовать метод val, чтобы получить и установить значение textarea, например:

$('#PersonalGreeting').val($('#PersonalGreeting').val() + '<b>bold text here</b>');

Answer 2

SLaks и VoteyDisciple верны. Вы используете append неправильно, так как воспринимаете это как строковую функцию.

С http://docs.jquery.com/Manipulation/append

Добавлять содержимое внутрь каждого согласованный элемент. Эта операция является лучший способ вставить элементы внутрь, в конец всех соответствующих элементов. Это похоже на выполнение appendChild для все указанные элементы, добавление их в документ.

Изобретать колесо на этом, вероятно, больше головной боли, чем стоит, если только это не попытка создать превосходный конкурирующий продукт или для ваших собственных экспериментов.

Кроме того, я бы избегал использования навязчивого JavaScript, как вы показали в своем примере с onclick='javascript:insert("bold")', встроенным в элемент * input. Вместо этого у вас будет более элегантное решение, похожее на следующее:

HTML

<input type="button" value="B" class="editor-command" >
<input type="button" value="I" class="editor-command" >
<input type="button" value="U" class="editor-command" >

JavaScript (не тестировался)

$(document).ready(function() {
  var textarea = $('#PersonalGreeting')
  $(".editor-command").each(function(i, node) {
    textarea.val(textarea.val() + '<$>text here</$>'.replace(/\$/g, node.value);
  });
});

Answer 3

Основная проблема в том, что вы не можете поместить HTML внутрь <textarea>. Фактически, вы не можете добавлять элементы HTML к одному. Вы можете использовать метод .val(), чтобы изменить текст, показанный внутри, но это не сделает его жирным. Это просто заставит его отображать <b> как часть текста.

Стандартный редактор WYSIWYG, такой как TinyMCE , бесплатен и прост в реализации. Вместо того, чтобы заново изобретать колесо (что на лот сложнее, чем может показаться), попробуйте существующее колесо.

Answer 4

Вы можете сделать это:

 $('#PersonalGreeting').append('[b]bold text here[/b]');

Но это не сделает текст жирным. Если честно, я не совсем уверен, как сделать текст жирным внутри текстовой области, я представляю себе некоторые хитрости js.

Answer 5

Если основная проблема заключается в том, что текстовая область не видна, я бы попробовал это:

$('#PersonalGreeting').append('<b>bold text here</b>').show();

Может быть стоит выстрел.

edit: тщетно пытаться не изобретать велосипед, я добился успеха с WYMEditor