55

I have an oninput event on a textarea to check the height and resize it. Now I need to edit the value sometimes. I do this just by editting the val() in jQuery, but that does not trigger the oninput event. Is there any way to trigger the oninput event programatically with jQuery?

Improve this question
3
  • 28
    For future visitors: a simple .on('input') works. Commented May 24, 2014 at 19:22
  • 1
    @hauzer you're absolutely right. Here's a DEMO that proves it. tested on Chrome, FF & Opera (and I'm guessing there wouldn't be a trouble with modern IE versions) Commented Jun 23, 2014 at 13:10
  • Or just use simple JS: element.dispatchEvent(new Event('input')); (IE9+) Commented Feb 27, 2017 at 14:12

7 Answers 7

Reset to default
65

Use .on('input'). For example: 

$('textarea').on('input', function() { text = $('textarea').val(); $('div').html(text); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <textarea placeholder="Type something here"></textarea> <div></div>

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

I've accepted this answer instead of the previously accepted one, because these days, this is actually the correct answer. It is now supported and works like a charm.
@paul_jones Thanks man. I always thinking of this. On HTML page we can use <input onInput="console.log('working')">
I'm confused by this answer, since it seems to handle the input event, not trigger it. @DeepFrozen, why did you accept this answer?
33

It is a bit too late, but for future reference, there is the .trigger method.

$("#testArea").on("input", function(e) { $("#outputArea").text( $(e.target).val() ) }); $("#testArea").val("This is a test"); $("#testArea").trigger("input");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <input id="testArea" type="text" /> <div id="outputArea"></div>

Improve this answer

Comments

18

You can simply invoke it, e.g.:

$("input")[0].oninput = function () { alert("hello"); }; $("input")[0].oninput();

...but as @Sammaye points out, jQuery has no explicit "oninput" handler, so you'll have to use POJS.

Demo on JS Fiddle.

Improve this answer

Comments

7

oninput is not actually in JQuery yet.

You can see posts about it here:

http://forum.jquery.com/topic/html5-oninput-event

http://bugs.jquery.com/ticket/9121

Basically the general consensus is that they don't want it yet.

But no, changing val() directly would not trigger the html5 oninput because it's specification states it is when the user, in the UI, changes the value of the input.

Edit:

However some one has kindly made a plugin for people who wish to use HTML5 only events: https://github.com/dodo/jquery-inputevent

Improve this answer

3 Comments

The link to Andy's project is dead. There's a fork which is under active development on github.
@JoeTaylor, you can edit the answer to update the dead link with the new one. By the way, I've already done so.
Maybe this was right when the question was asked. But since jQuery 1.0 there is the trigger method.
6

You can bind to input and change:

input will be triggered at user input

change will be triggered at change() and to val(" ") assignments, but after some changes

$("#textarea").bind("input change", function() { alert("change happend"); }); ...

after you binded to change you can call it manualy on each val(" ") assignment:

$("#textarea").val("text").change();

or you can overwrite jQuery val(" ") method to trigger change on each user val(" ") call:

(function ($) { var fnVal = $.fn.val; $.fn.val = function(value) { if (typeof value == 'undefined') { return fnVal.call(this); } var result = fnVal.call(this, value); $.fn.change.call(this); // calls change() return result; }; })(jQuery);
Improve this answer

Comments

0

Try with "keypress" or "keydown".

Example 1:

$("#textarea").keypress(function(){ alert($("#textarea").val()); });

Example 2:

$("#textarea").keydown(function(){ alert($("#textarea").val()); });
Improve this answer

Comments

0

push RUN CODE SNIPPET for seeing results

i've been searching for a better example to join an input range to an input value and so i modified Fernando's example in a JQuery plugin ,so : for every <input type="range" min="1" max="100" value="50" id="range1"> you'll have his value: <input type="text" disabled id="value" class="range1" value="0"> so is like for any parent range id="range1" there is a child id="value" class="range1" 

<!-- <script src="../js/jquery.js"></script> --> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 1<input type="range" min="1" max="100" value="50" id="range1"><input type="text" disabled id="value" class="range1" value="0"><br> 2<input type="range" min="1" max="100" value="50" id="range2"><input type="text" disabled id="value" class="range2" value="0"><br> 3<input type="range" min="1" max="100" value="50" id="range3"><input type="text" disabled id="value" class="range3" value="0"><br> 4<input type="range" min="1" max="100" value="50" id="range4"><input type="text" disabled id="value" class="range4" value="0"><br> ...<br> n<input type="range" min="1" max="100" value="50" id="rangen"><input type="text" disabled id="value" class="rangen" value="0"><br> <script type="text/javascript"> <!-- $(document).ready(function() { $('input').on("input",function(){ $('input').each(function(index) { //console.log('1 '+index + ': ' + $(this).text()+',id='+$(this).attr('id')); if($(this).attr('id')=='value'){ //console.log('2 class='+$(this).attr('class')); var obj=$('input#'+$(this).attr('class') ); var hisvalue=$(this); //console.log('3 parent`s value='+obj.val() ); obj.on("input",function(){ hisvalue.val(obj.val()); }); } }); }); $('input').trigger("input"); }); //--> </script>

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.