jQuery 'input' event

Question

I've never heard of an event in jQuery called input till I saw this jsfiddle.

Do you know why it's working? Is it an alias for keyup or something?

$(document).on('input', 'input:text', function() {});

Succedaneum

It's not a direct alias of keyup. keyup or keypress will fire on any key, including arrows, tab, etc, that don't necessarily change the input. The input event only fires when the value of the input has changed. – Setter

developer.mozilla.org/en-US/docs/Web/Reference/Events/input – Ingeringersoll

Except change only fires once the field has lost focus. input fires immediately. – Setter

@undefined Yes I have, otherwise I wouldn't had created a question for it. The only thing that comes up on Google are articles about the input element and how to attach events to it. – Succedaneum

This question beautifully answers all the concepts -#15727824 – Warranty

I like how that when you google this question today, this is the first result that comes up :) – Succedaneum

Answer 1

Occurs when the text content of an element is changed through the user interface.

It's not quite an alias for keyup because keyup will fire even if the key does nothing (for example: pressing and then releasing the Control key will trigger a keyup event).

A good way to think about it is like this: it's an event that triggers whenever the input changes. This includes -- but is not limited to -- pressing keys which modify the input (so, for example, Ctrl by itself will not trigger the event, but Ctrl-V to paste some text will), selecting an auto-completion option, Linux-style middle-click paste, drag-and-drop, and lots of other things.

See this page and the comments on this answer for more details.

Grandfather

Do you know if jQuery makes up the missing browser support? (IE8, IE9 inconsistencies, etc) – Setter

I don't, unfortunately. However, writing your own input equivalent wouldn't be terribly difficult if jQuery doesn't. Simply use keyup and filter out the keys which do nothing. Admittedly, there are a large number of those, but it is entirely possible to do so. – Grandfather

@J.DavidSmith This is brilliant. From now on I don't need to use those three events whenever a user types something in a text field and I want to trigger something. Thanks for the detailed link as well. Do you guys keep bookmarks of this stuff? How do you find the relevant articles so fast? – Succedaneum

I just googled 'js input event'. There is a knack for knowing what terms to use to find what you want on google; it comes with experience. And then, of course, google records everything and uses it to learn what you actually want. Most of my searches are for API docs and programming questions, so it's learned over time that when I search for things it should probably show me API docs and programming answers. – Grandfather

Well, I was searching for "jQuery input event", I had no idea it was an original JS event. Same here, the first results are usually from SO, which I consider mostly as de facto answers/official sources of information. – Succedaneum

Almost all (or all?) jQuery events are just wrappers for JS events. jQuery just makes management of events much more sane (and even allows you to use events on raw Objects!) – Grandfather

input is actually more than just a filtered keyup, for example it will fire also when the value was selected from the list of previously used values... It was something that would very hard to handle if there were no input event. – Incommodious

@Incommodious Ah! I had no idea about that! I'm going to add it to my answer. – Grandfather

oninput also fires when the text is changed by mouse (either via drag and drop, or via right-click menu or middle-click to paste). – Abuse

@DenilsonSá good to know! I've rephrased the answer to clarify that it responds to lots of things besides keyboard keypresses. – Grandfather

This event 'input' does not work on firefox, in my case, firefox version 38 – Montmartre

@datnt: According to mdn it should work in FF 38. Are you sure your code isn't broken? – Grandfather

@JDavidSmith I'm absolutely sure. The code is very simple, just catch "input" event then trigger alert/console.log, everything works on google chrome, ie, but nothing happens on firefox. – Montmartre

@david Smith, by the quoted text, input event shouldn't fire if there are programmatic changes to input elements? – Helvetia

Is there a non-jquery way of doing this in ES2017 for example? – Liquorish

Answer 2

oninput event is very useful to track input fields changes.

However it is not supported in IE version < 9. But older IE versions has its own proprietary event onpropertychange that does the same as oninput.

So you can use it this way:

$(':input').on('input propertychange');

To have a full crossbrowser support.

Since the propertychange can be triggered for ANY property change, for example, the disabled property is changed, then you want to do include this:

$(':input').on('propertychange input', function (e) {
    var valueChanged = false;

    if (e.type=='propertychange') {
        valueChanged = e.originalEvent.propertyName=='value';
    } else {
        valueChanged = true;
    }
    if (valueChanged) {
        /* Code goes here */
    }
});

Toneme

Exactly what I needed. Thank you. (I hate having to support < IE9.) – Cheetah

Some more info: "Opera does not fire an input event after dropping text in an input field. IE 9 does not fire an input event when the user removes characters from input filled by keyboard, cut, or drag operations." developer.mozilla.org/en-US/docs/Web/Events/… – Hibben

There's a problem with this code. If maxlength is set on the input element, the 'input' event is triggered even when the max length is reached and the value isn't changed – Ectoplasm

But why not just two separate functions? That way, there's no need to check the event type or property name. The code could be in a third shared function. – Meghannmegiddo

Answer 3

Using jQuery, the following are identical in effect:

$('a').click(function(){ doSomething(); });
$('a').on('click', function(){ doSomething(); });

With the input event, however, only the second pattern seems to work in the browsers I've tested.

Thus, you'd expect this to work, but it DOES NOT (at least currently):

$(':text').input(function(){ doSomething(); });

Again, if you wanted to leverage event delegation (e.g. to set up the event on the #container before your input.text is added to the DOM), this should come to mind:

$('#container').on('input', ':text', function(){ doSomething(); });

Sadly, again, it DOES NOT work currently!

Only this pattern works:

$(':text').on('input', function(){ doSomething(); });

EDITED WITH MORE CURRENT INFORMATION

I can certainly confirm that this pattern:

$('#container').on('input', ':text', function(){ doSomething(); });

NOW WORKS also, in all 'standard' browsers.

Fari

Answer 4

Be Careful while using INPUT. This event fires on focus and on blur in IE 11. But it is triggered on change in other browsers.

https://connect.microsoft.com/IE/feedback/details/810538/ie-11-fires-input-event-on-focus

Pinebrook

Answer 5

As claustrofob said, oninput is supported for IE9+.

However, "The oninput event is buggy in Internet Explorer 9. It is not fired when characters are deleted from a text field through the user interface only when characters are inserted. Although the onpropertychange event is supported in Internet Explorer 9, but similarly to the oninput event, it is also buggy, it is not fired on deletion.

Since characters can be deleted in several ways (Backspace and Delete keys, CTRL + X, Cut and Delete command in context menu), there is no good solution to detect all changes. If characters are deleted by the Delete command of the context menu, the modification cannot be detected in JavaScript in Internet Explorer 9."

I have good results binding to both input and keyup (and keydown, if you want it to fire in IE while holding down the Backspace key).

Venial

Answer 6

I think 'input' simply works here the same way 'oninput' does in the DOM Level O Event Model.

Incidentally:

Just as silkfire commented it, I too googled for 'jQuery input event'. Thus I was led to here and astounded to learn that 'input' is an acceptable parameter to jquery's bind() command. In jQuery in Action (p. 102, 2008 ed.) 'input' is not mentionned as a possible event (against 20 others, from 'blur' to 'unload'). It is true that, on p. 92, the contrary could be surmised from rereading (i.e. from a reference to different string identifiers between Level 0 and Level 2 models). That is quite misleading.

Plott

Thanks for the input (no pun intended), this seems to be an official thread now! :) – Succedaneum

Answer 7

The best way to live get typed text from a text input:

$(document).ready(function () {
  $('#divnode').text('Test...');
  $('input#search').on('input', (e) => {
    $('#divnode').text(e.target.value);
  });
});

.search{
    display: flex;
    background-color: rgba(184, 223, 255, 0.863);
    padding: 1vw;
    margin: 2vw;
    border: 1px solid gray;
    border-radius: 10px;
    
}
#search,#divnode{
    padding: 5px;
    margin: 5px;
    border: 1px dashed gray;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="#" type="image/x-icon">
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="./script.js"></script>
    <title>Document</title>
</head>
<body>
    <div class="search">
        <input type="search" name="search" id="search">
        <div id="divnode"></div>
    </div>

</body>
</html>

Intendment

Answer 8

jQuery has the following signature for the .on() method: .on( events [, selector ] [, data ], handler )

Events could be anyone of the ones listed on this reference:

https://developer.mozilla.org/en-US/docs/Web/Events

Though, they are not all supported by every browser.

Mozilla states the following about the input event:

The DOM input event is fired synchronously when the value of an or element is changed. Additionally, it fires on contenteditable editors when its contents are changed.

Dunstan

Answer 9

$("input#myId").bind('keyup', function (e) {    
    // Do Stuff
});

working in both IE and chrome

Phillis

bind is deprecated, use on – Ultramarine