CODEWITHSUNDEEP
jqueryinput
user736893
user736893

Reputation:

Detect changed input text box

I've looked at numerous other questions and found very simple answers, including the code below. I simply want to detect when someone changes the content of a text box but for some reason it's not working... I get no console errors. When I set a breakpoint in the browser at the change() function it never hits it. 

$('#inputDatabaseName').change(function () { 
    alert('test'); 
});

<input id="inputDatabaseName">

Upvotes: 330

Views: 697099

Answers (10)

rashid choudhary
rashid choudhary

Reputation: 11

$(document).on('input', '#inputDatabaseName', function () { alert("yess"); });

Upvotes: 0

ucMax
ucMax

Reputation: 5428

Try something like this, it always works.

$(function() {
    $("#my_input").on("change paste keyup", function() {
       alert($(this).val()); 
    });
});

Upvotes: 4

Darwin
Darwin

Reputation: 2037

$('#inputDatabaseName').change(function(){
    alert('Changed!')
});

Source

Upvotes: 0

Ouadie
Ouadie

Reputation: 13185

You can use the input Javascript event in jQuery like this:

$('#inputDatabaseName').on('input',function(e){
    alert('Changed!')
});

In pure JavaScript:

document.querySelector("input").addEventListener("change",function () {
  alert("Input Changed");
})

Or like this:

<input id="inputDatabaseName" onchange="youFunction();"
onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();"/>

Upvotes: 608

azerafati
azerafati

Reputation: 18583

Each answer is missing some points, so here is my solution:

$("#input").on("input", function(e) {
  var input = $(this);
  var val = input.val();

  if (input.data("lastval") != val) {
    input.data("lastval", val);

    //your change action goes here 
    console.log(val);
  }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input">
<p>Try to drag the letters and copy paste</p>

The Input Event fires on Keyboard input, Mouse Drag, Autofill and Copy-Paste tested on Chrome and Firefox. Checking for previous value makes it detect real changes, which means not firing when pasting the same thing or typing the same character or etc.

Working example: http://jsfiddle.net/g6pcp/473/

update:

And if you like to run your change function only when user finishes typing and prevent firing the change action several times, you could try this:

var timerid;
$("#input").on("input", function(e) {
  var value = $(this).val();
  if ($(this).data("lastval") != value) {

    $(this).data("lastval", value);
    clearTimeout(timerid);

    timerid = setTimeout(function() {
      //your change action goes here 
      console.log(value);
    }, 500);
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input">

If user starts typing (e.g. "foobar") this code prevents your change action to run for every letter user types and and only runs when user stops typing, This is good specially for when you send the input to the server (e.g. search inputs), that way server does only one search for foobar and not six searches for f and then fo and then foo and foob and so on.

Upvotes: 123

Yoosaf Abdulla
Yoosaf Abdulla

Reputation: 3978

I think you can use keydown too:

$('#fieldID').on('keydown', function (e) {
  //console.log(e.which);
  if (e.which === 8) {
    //do something when pressing delete
    return true;
  } else {
    //do something else
    return false;
  }
});

Upvotes: 0

kmxr
kmxr

Reputation: 479

In my case, I had a textbox that was attached to a datepicker. The only solution that worked for me was to handle it inside the onSelect event of the datepicker.

<input type="text"  id="bookdate">

$("#bookdate").datepicker({            
     onSelect: function (selected) {
         //handle change event here
     }
});

Upvotes: 4

Saumil
Saumil

Reputation: 2517

onkeyup, onpaste, onchange, oninput seems to be failing when the browser performs autofill on the textboxes. To handle such a case include "autocomplete='off'" in your textfield to prevent browser from autofilling the textbox,

Eg,

<input id="inputDatabaseName" autocomplete='off' onchange="check();"
 onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();" />

<script>
     function check(){
          alert("Input box changed");
          // Things to do when the textbox changes
     }
</script>

Upvotes: 14

Scott Harwell
Scott Harwell

Reputation: 7465

try keyup instead of change.

<script type="text/javascript">
   $(document).ready(function () {
       $('#inputDatabaseName').keyup(function () { alert('test'); });
   });
</script>

Here's the official jQuery documentation for .keyup().

Upvotes: 185

Matt Ball
Matt Ball

Reputation: 359776

Text inputs do not fire the change event until they lose focus. Click outside of the input and the alert will show.

If the callback should fire before the text input loses focus, use the .keyup() event.

Upvotes: 25

Related Questions