Textarea在浏览器之间更新的方式不同

Question

I have a textarea that I am trying to update using jQuery and I am finding that I get different results based on what browser I am using.

Have a look at this: https://jsfiddle.net/JBookham/mwaa6z2f/4/

I am using $('#txtArea').html("Example text"); to update the text that is shown. This works initially, until I try and type something in the textarea. After I do this in Chrome, .html() stops updating the value of the textarea. I have debugged through the JavaScript and can see that the innerHtml of the textarea is being updated, but not the value. I try to do the same thing in Edge and the innerHtml and the value get updated as expected.

My question is, does anyone know why this happens or knows of a way that I can get it working the same way between browsers?

Thanks

Update :
.val() does update the textarea the same way between browsers, but it doesn't provide the same functionality that I was looking for. However this answer had a way that I could use .val() and still be able to decode the text I was passing in, like so:
var decoded = $("<textarea/>").html("other text &amp;").val(); $('#txtArea').val(decoded);
It feels a bit hacky, like there should be a better way, but at least for the moment it's given me something that works the same way between browsers.

Answer 1

You should use .val() to do this.

https://jsfiddle.net/mwaa6z2f/7/