Modify element through Javascript and "warn" page that element has been modified

Asked

Viewed 66 times

1

$(document).ready(function(){
  $("#myTextarea").change(function(){
    alert("text area changed");
  });
  
  //$("#myTextarea").keydown(function(){
    //alert("text area changed");
  //});
});
 
setTimeout(function() {
  $("#myTextarea").val("changed");
  $("#myTextarea").blur();
}, 1000);
<!DOCTYPE html>
<body>
  <textarea id="myTextarea" rows="4" cols="20"></textarea>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>

I need to know why the above code doesn’t work, in theory, the textarea when modified within the setTimeout, should execute the function code change, but it doesn’t, and I need to know why and how I fix it.

javascript jquery html textarea

  • You’re saying it’s time to hit some key?

  • Not necessarily @Virgilionovic, if you run the example above you will see that I modify the element by JS, but the page does not understand that it has been modified and the event code change, is not executed.

  • 1

    Fabiano, if I change and leave the box he realizes what he needs, "I think" is not clear what is to do? what is to make this code?

  • 1

    Exact @Virgilionovic, if you manually type something into the textarea and exit the element, the code I want to be executed will be run, but my problem is that I need to change the element through javascript and I need the event to be called when I change it via javascript.

3 answers

1


Fire a Rigger instead of the Blur()...

$(document).ready(function(){
  $("#myTextarea").change(function(){
    alert("text area changed");
  });
  
  //$("#myTextarea").keydown(function(){
    //alert("text area changed");
  //});
});
 
setTimeout(function() {
  $("#myTextarea").val("changed");
  //$("#myTextarea").blur();
  $("#myTextarea").trigger("change");
}, 1000);
<!DOCTYPE html>
<body>
  <textarea id="myTextarea" rows="4" cols="20"></textarea>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>

  • Okay Julio, this possibly solves my problem and I understand why it works, but you agree that if I comment on the line $("#myTextarea").val("changed");the event will be fired in the same way, even though the element has in fact been modified? I wanted something that would intelligently make the browser recognize that the element was indeed modified.

  • @Fabianolothor work with Angularjs then!

  • In this specific case it does not give @Virgilionovic, I am creating a script to be executed whenever I access a specific page (that is not mine) and on this page, when I type something in textarea she does something, I wanted that whenever I opened the page the event would run automatically, strangely there, not even using trigger the action is executed, probably the listener is not for the event change and I don’t know what it is. :/

0

Right after the textarea change use the method Trigger, and call the event you need in case change, example:

$(document).ready(function(){
  $("#myTextarea").change(function(){
    alert("text area changed");
  });
});
 
setTimeout(function() {
  $("#myTextarea").val("changed").trigger('change');
}, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<textarea id="myTextarea" rows="4" cols="20"></textarea>

References:

0

This event is only triggered when the user changes the content of textareaand the element loses focus (https://developer.mozilla.org/en-US/docs/Web/Events/change).

You can fire the event using jqueryas follows:

$("#myTextarea").change(); (https://api.jquery.com/change/)

$(document).ready(function(){
  $("#myTextarea").change(function(){
    alert("text area changed");
  });
  
  //$("#myTextarea").keydown(function(){
    //alert("text area changed");
  //});
});
 
setTimeout(function() {
  $("#myTextarea").val("changed");
  $("#myTextarea").change();
}, 1000);
<!DOCTYPE html>
<body>
  <textarea id="myTextarea" rows="4" cols="20"></textarea>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>

Browser other questions tagged javascript jquery html textarea

You are not signed in. Login or sign up in order to post.