JQuery.append не присоединяется к textarea после редактирования текста

Возьмите следующую страницу:

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"/>
    </head>
    <body>
        <div class="hashtag">#one</div>
        <div class="hashtag">#two</div>
        <form accept-charset="UTF-8" action="/home/index" method="post">
            <textarea id="text-box"/>
            <input type="submit" value ="ok" id="go" />
        </form>
        <script type="text/javascript">
$(document).ready(function(){

  $(".hashtag").click(function(){
    var txt = $.trim($(this).text());
    $("#text-box").append(txt);
  });
});
        </script>
    </body>
</html>

Поведение, которое я ожидаю, и что я хочу достичь, заключается в том, что когда я нажимаю на один из div с классом hashtag, их содержимое ( "#one" и "#two" соответственно) будет добавлено в конце текста в textarea text-box.

Это происходит, когда я нажимаю на теги хэша сразу после загрузки страницы. Однако, когда я также начинаю редактировать текст в text-box вручную, а затем возвращаюсь к щелчку на любом из хэш-тегов, которые они не добавляют в Firefox. В Chrome происходит самая странная вещь - весь текст, который я набираю вручную, заменяется новым хэштегом и исчезает.

Я, наверное, делаю что-то очень нехорошее здесь, поэтому я был бы признателен, если кто-то может указать на мою ошибку здесь и как это исправить. Спасибо.

Ответ 1

2 вещи.

Во-первых, <textarea/> не является допустимым тегом. Теги <textarea> должны быть полностью закрыты с помощью полного тега </textarea>.

Во-вторых, $(textarea).append(txt) не работает, как вы думаете. Когда страница загружается, текстовые узлы внутри текстового поля устанавливают значение этого поля формы. После этого текстовые узлы и значение могут быть отключены. При вводе в поле значение изменяется, но текстовые узлы внутри него на DOM этого не делают. Затем вы меняете текстовые узлы с помощью append(), и браузер стирает значение, поскольку он знает, что текстовые узлы внутри тега изменились.

Итак, вы хотите установить значение, которое вы не хотите добавлять. Для этого используйте метод jQuery val().

$(document).ready(function(){
  $(".hashtag").click(function(){
    var txt = $.trim($(this).text());
    var box = $("#text-box");
    box.val(box.val() + txt);
  });
});

Рабочий пример: http://jsfiddle.net/Hhptn/

Ответ 2

Используйте функцию val():)

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
    </head>
    <body>
        <div class="hashtag">#one</div>
        <div class="hashtag">#two</div>
        <form accept-charset="UTF-8" action="/home/index" method="post">
            <textarea id="text-box"></textarea>
            <input type="submit" value ="ok" id="go" />
        </form>
        <script type="text/javascript">
$(document).ready(function(){

  $(".hashtag").click(function(){
    var txt = $.trim($(this).text());
    $("#text-box").val($("#text-box").val() + txt);
  });
});
        </script>
    </body>
</html>

Помогает ли это?

Причина append не работает, потому что значение textarea составлено из дочернего node, но, рассматривая его как несколько отдельных узлов, экран не будет обновляться, согласно моему Firebug. Firebug покажет мне обновленные дочерние узлы, но НЕ текст, который я вводил вручную в текстовое поле, тогда как на экране отображается текст, напечатанный вручную, но не новые узлы.

Ответ 3

Вы можете ссылаться по значению textarea.

$(document).ready(function () {
     window.document.getElementById("ELEMENT_ID").value = "VALUE";
});

function GetValueAfterChange()
{
   var data = document.getElementById("ELEMENT_ID").value;
}

отлично работает.

Ответ 4

if(data.quote) $('textarea#message').val($('textarea#message').val()+data.message +' ').focus();