JQuery nie .append dołączanie do textarea po tekst edytowany

podjąć następujące strony:JQuery nie .append dołączanie do textarea po tekst edytowany

<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>

Zachowanie Spodziewam się, i że chcę osiągnąć jest to, że po kliknięciu na jeden z div z klasą hashtag ich zawartość (odpowiednio "#one" i "#two") zostanie dołączona na końcu tekstu w polu tekstowym text-box.

Dzieje się tak, gdy kliknę znaczniki haszowania zaraz po załadowaniu strony. Jednak gdy zacznę też ręcznie edytować tekst w text-box ręcznie, a następnie wracam do klikania na którekolwiek z hashtagów, których nie dołączą do Firefoksa. W Chrome dzieje się najdziwniejsze - cały tekst, który wpisuję ręcznie, zostaje zastąpiony nowym hashtagiem i znika.

Prawdopodobnie robię coś bardzo złego tutaj, więc byłbym wdzięczny, gdyby ktoś mógł wskazać mój błąd tutaj i jak to naprawić. Dzięki.

Źródło

2011-01-18 Krzysztof Kozmic

2 rzeczy.

Po pierwsze, <textarea/> nie jest prawidłowym tagiem. <textarea> znaczniki muszą być całkowicie zamknięte przy użyciu pełnego tagu zamykającego </textarea>.

Po drugie, $(textarea).append(txt) nie działa tak, jak myślisz. Po wczytaniu strony węzły tekstowe w obszarze tekstowym zostają ustawione na wartość tego pola formularza. Następnie węzły tekstowe i wartość można odłączyć. Podczas wpisywania w polu wartość zmienia się, ale węzły tekstowe w tym polu w modelu DOM nie. Następnie zmieniasz węzły tekstowe za pomocą funkcji append(), a przeglądarka kasuje wartość, ponieważ wie, że zmieniono węzły tekstowe wewnątrz znacznika.

Więc chcesz ustawić wartość, której nie chcesz dodawać. Użyj do tego metody val() jQuery.

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

przykład robocza: http://jsfiddle.net/Hhptn/

Źródło

2011-01-18 10:32:43

dziękuję to, co chciałem zrozumieć –

Użyj val() funkcja :)

<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>

Czy to pomoże?

Powód wydaje się nie działać, ponieważ wartość textarea składa się z węzła podrzędnego, ale traktując go jako wiele oddzielnych węzłów, ekran nie będzie aktualizowany, zgodnie z moim Firebug. Firebug pokaże mi zaktualizowane węzły podrzędne, ale NIE tekst, który wpisałem ręcznie w polu tekstowym, podczas gdy ekran pokazuje mi ręcznie wpisany tekst, ale nie nowe.

Źródło

2011-01-18 10:30:45 Pim

Można odwołać się od wartości pola tekstowego.

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

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

działa dobrze.

Źródło

2015-02-10 11:33:42 Makko

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

Źródło

2015-10-31 20:57:46

JQuery nie .append dołączanie do textarea po tekst edytowany

Odpowiedz

Powiązane problemy