jQuery – text input field – change keyup and paste events

jQuery can be used to handle these events on an input text field.

  1. change (when text input field changes and loses focus)
    $('input#field1').on('change', function(evt) { console.log(this.value) });
    $('input#field1').change(function(evt) { console.log(this.value) });
    
  2. keyup
    $('input#field1').on('keyup', function(evt) { console.log(this.value) });
    $('input#field1').keyup(function(evt) { console.log(this.value) });
    
  3. paste
    $('input#field1').on('paste', function(evt) { console.log(this.value) });
    

Example – input change event

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

Change the following and focus somewhere else<br>
<input id=field1 type=text value=10>
<div id=msg></div>

<script type="text/javascript">
  $('input#field1').on('change', function(evt) {
    $("#msg").append("newval => " + this.value + "<br>");
  });
</script>
refresh

Example – input change, keyup, paste events

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<input id=field1 type=text value=10>
<div id=msg></div>

<script type="text/javascript">
  $('input#field1').on("change keyup paste", function(evt) {
    $("#msg").append("eventtype => " + evt.type + " / newval => " + this.value + "<br>");
  });
</script>
refresh
Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments