JQuery .append không phụ thêm vào textarea sau khi văn bản sửa

Hãy trang sau đây:JQuery .append không phụ thêm vào textarea sau khi văn bản sửa

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

Các hành vi tôi mong đợi, và tôi muốn đạt được là khi tôi bấm vào một trong những divs với lớp hashtag nội dung của chúng (tương ứng là "#one" và "#two") sẽ được thêm vào cuối văn bản trong văn bản text-box.

Điều này xảy ra khi tôi nhấp vào thẻ băm ngay sau khi tải trang. Tuy nhiên khi tôi sau đó cũng bắt đầu chỉnh sửa văn bản trong text-box theo cách thủ công và sau đó quay lại nhấp vào bất kỳ thẻ bắt đầu bằng # nào mà chúng không được thêm vào Firefox. Trên Chrome, điều kỳ lạ nhất đang xảy ra - tất cả văn bản tôi nhập theo cách thủ công đều được thay thế bằng thẻ bắt đầu bằng # mới và biến mất.

Tôi có thể đang làm điều gì đó rất sai ở đây, vì vậy tôi sẽ đánh giá cao nếu ai đó có thể chỉ ra sai lầm của tôi ở đây và cách khắc phục điều đó. Cảm ơn.

Nguồn

2011-01-18 Krzysztof Kozmic

2 điều.

Đầu tiên, <textarea/> không phải là thẻ hợp lệ. Các thẻ <textarea> phải được đóng hoàn toàn bằng thẻ đóng đầy đủ </textarea>.

Thứ hai, $(textarea).append(txt) không hoạt động như bạn nghĩ. Khi một trang được tải các nút văn bản bên trong vùng văn bản được đặt giá trị của trường biểu mẫu đó. Sau đó, các nút văn bản và giá trị có thể bị ngắt kết nối. Khi bạn nhập vào trường, giá trị thay đổi, nhưng các nút văn bản bên trong nó trên DOM thì không. Sau đó, bạn thay đổi các nút văn bản với append() và trình duyệt sẽ xóa giá trị vì nó biết các nút văn bản bên trong thẻ đã thay đổi.

Vì vậy, bạn muốn đặt giá trị, bạn không muốn chắp thêm. Sử dụng phương thức val() của jQuery cho việc này.

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

dụ làm việc: http://jsfiddle.net/Hhptn/

Nguồn

2011-01-18 10:32:43

cảm ơn bạn những gì tôi muốn hiểu –

Sử dụng val() chức năng :)

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

Điều đó giúp đỡ?

Lý do nối thêm dường như không hoạt động là vì giá trị của vùng văn bản được tạo thành từ nút con, nhưng bằng cách xử lý nó như nhiều nút riêng biệt, màn hình sẽ không cập nhật, theo Firebug của tôi. Firebug sẽ hiển thị cho tôi các nút con được cập nhật, nhưng KHÔNG phải văn bản tôi đã nhập thủ công vào vùng văn bản, trong khi màn hình hiển thị cho tôi văn bản được nhập theo cách thủ công nhưng không hiển thị các nút mới.

Nguồn

2011-01-18 10:30:45 Pim

Bạn có thể tham khảo bởi giá trị của textarea.

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

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

hoạt động tốt.

Nguồn

2015-02-10 11:33:42 Makko

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

Nguồn

2015-10-31 20:57:46

JQuery .append không phụ thêm vào textarea sau khi văn bản sửa

Trả lời

Các vấn đề liên quan