Jquery trigger input event on load

Question

I'm using the following to do something when interacting with an input

$('input[name=hello]').on('input', function() {

...

});

Is it possible to trigger what's inside the function on load? I tried...

$('input[name=hello]').trigger();

Or

$('input[name=hello]').keypress();

...and it does not work. The purpose is to run on load whatever is inside teh input event without having to redeclare it.

sounds similar: http://stackoverflow.com/questions/832059/definitive-way-to-trigger-keypress-events-with-jquery — tech2017, May 09 '17 at 16:56
You should be able to trigger it by $('input[name=hello]').trigger('input'); — MCMXCII, May 09 '17 at 16:57
Possible duplicate of [Definitive way to trigger keypress events with jQuery](http://stackoverflow.com/questions/832059/definitive-way-to-trigger-keypress-events-with-jquery) — Poorna Rao, May 09 '17 at 16:58
How about separating the behaviour of the `$('input[name=hello]').on('input', function() {...});` inside another function, i.e. `$('input[name=hello]').on('input', function() { myFunction()});`. Having done that, all you need is call the function on document ready. i.e. `$(document).ready(function(){ myFunction(); //all your other code...});` In that manner you could also use that behaviour at your own leisure. — Omar Yafer, May 09 '17 at 17:06

shellco · Answer 1 · 2018-10-29T23:49:17.000

2

.trigger() takes any JavaScript event type. If you're listening for input, just trigger an input:

$('input[name=hello]').trigger('input');

edited Oct 29 '18 at 23:49

answered Oct 08 '18 at 03:50

shellco

536
1
6
25

score 1 · Accepted Answer · answered May 09 '17 at 17:05

$(function(){

  function inputTriggered(e) {
    // May want to add a way to reduce excessive calls
    console.log('Triggered');
  }
  
  // Listen for a bunch of interactions
  $(document).on('click keydown blur focus', 'input', inputTriggered);

  // Trigger on load
  $('input[name=A]').trigger('click');

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p>
<input name="A" value="A">
</p>

<p>
<input name="B" value="B">
</p>

score 1 · Answer 3 · answered May 09 '17 at 17:12

I decide to elaborate on the comment I made before. How about separating the behaviour of the $('input[name=hello]').on('input', function() {...}); inside another function. Having done that, all you need is call the function on document ready function . In that manner you could also use that behaviour at your own leisure.

$(document).ready(function(){
    //The behaviour you desire
    function behaviour(){
         console.log('activated');
    }

    $('input[name=hello]').on('input', behaviour); //Bind your function to the event

    behaviour(); //Execute your function when the page loads
});

score 0 · Answer 4 · answered Sep 28 '22 at 05:54

My method needs JQuery library :

<textarea></textarea>
<script>
  $(document).on('keydown', 'textarea', function (event) {
    if (event.key == 'Tab' || event.keyCode == 9) {
      event.preventDefault();
      var start = $(this)[0].selectionStart;
      var end = $(this)[0].selectionEnd;
      $(this)[0].value = $(this)[0].value.substring(0, start) + '\t' + $(this)[0].value.substring(end);
      $(this)[0].selectionStart = $(this)[0].selectionEnd = start + 1;
    }
  });
</script>

Jquery trigger input event on load

4 Answers4