Fire oninput event with jQuery

Question

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?

Answer 1

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>

Answer 2

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>

Answer 3

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.

Answer 4

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

Answer 5

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

Answer 6

Try with "keypress" or "keydown".

Example 1:

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

Example 2:

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

Answer 7

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>