Is there any event to detect the value of textarea changes?

Question

I have this code:

$("#textarea_id").on('input', function(e){
 alert('the value of textarea changed');
});

$("#bold").on('click', function(e){ $("#textarea_id").val('bold'); });
$("#italic").on('click', function(e){ $("#textarea_id").val('italic'); });
$("#underline").on('click', function(e){ $("#textarea_id").val('underline'); });
$("#center").on('click', function(e){ $("#textarea_id").val('center'); });
$("#leftside").on('click', function(e){ $("#textarea_id").val('leftside'); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id = "textarea_id"></textarea>
<br>
<button id = "bold">B</button>
<button id = "italic">I</button>
<button id = "underline">U</button>
<button id = "center">C</button>
<button id = "leftside">L</button>

Currently I'm using input event to detect the value of that textarea changes. But as you see it doesn't work. I mean when I click on each of those buttons, I don't see this alert 'the value of textarea changed'.

I can do that by adding .change() in the end of these:

$("#textarea_id").val('bold').change();
$("#textarea_id").val('bold').change();
.
.
.

But this ^ isn't what I'm looking for. I need an event based on the changes on the textarea. So I want an event for here:

$("#textarea_id").on(' /* event here */ ', function(e){

Is there any event to be sensitive than changing the value of textarea by .val() ?

Possible duplicate of [Why does the jquery change event not trigger when I set the value of a select using val()?](http://stackoverflow.com/questions/4672505/why-does-the-jquery-change-event-not-trigger-when-i-set-the-value-of-a-select-us) — Paul, Jun 18 '16 at 23:46
That's interesting. Are you just curious why it's happening? You could just call a similar function in onclick as well as input change, but agree it would be nice if the onchange would detect changes with code as well. — Dan Weber, Jun 18 '16 at 23:50
That's how the change event works, with or without jQuery: programmatic changes to the field don't trigger the change event. — nnnnnn, Jun 19 '16 at 00:04
@stack so do you want the change event in your code to accomplish this? if yes let me know because I already have a quick solution. — HenryDev, Jun 19 '16 at 00:15
@HenryDev I just need a event to tell me *the value of that textarea changed by `.val()`*. — stack, Jun 19 '16 at 00:18
Possible duplicate of [Textarea onchange detection](http://stackoverflow.com/questions/2823733/textarea-onchange-detection) — Devid Farinelli, Jun 19 '16 at 00:19
@stack I just posted my solution, Please take a look at it. Is that what you needed? — HenryDev, Jun 19 '16 at 00:20

score 1 · Accepted Answer · answered Jun 19 '16 at 00:20

Here's my solution:

$(document).ready(function(){
 $("#textarea_id").on('input change', function(e) {
     alert('the value of textarea changed');
     });

 $(".myButton").click(function(){
  var elementValue = $(this).attr("id");
  $("#textarea_id").val(elementValue).trigger("change");
 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<textarea id="textarea_id"></textarea>
<br>
<button class = "myButton"     id="bold">B</button>
<button class = "myButton"     id="italic">I</button>
<button class = "myButton"     id="underline">U</button>
<button class = "myButton"     id="center">C</button>
<button class = "myButton"     id="leftside">L</button>

Actually this is not exactly what I was looking for, but adding an class for all those buttons is clean. Thx anyway +1 — stack, Jun 19 '16 at 00:25

Is there any event to detect the value of textarea changes?

1 Answers1