Simplify jQuery for detecting change of an input's value

Question

I am tracking the number of characters typed into a textarea are < 140. I am currently only catching characters on 'keyup' but also want to track if a user copy/paste into the textarea. Any suggestions?

$(function(){
  var limitDiv = $("#limit");
  var limit = limitDiv.data("limit");
  var button = $("input");
  $("textarea").on("keyup", function(){
    var total = this.value.length;
    var diff = limit- total;
    var condition = diff < 0 || total === 0;
    limitDiv.text(diff).toggleClass("red", condition);
    button.prop("disabled", condition);
  }).trigger("keyup");
})

you can also validate when the textarea loses focus – Tbseven Jan 30 '15 at 23:31 — Tbseven, Jan 30 '15 at 23:31

score 1 · Answer 1 · answered Jan 30 '15 at 23:35

1

There is a paste event in jQuery, though its not used very frequently. It seems to still work as of jQuery 2.1.0.

$("#input").on("paste", function(e){
      //code goes here
  });

http://jsfiddle.net/gty70qc9/2/

answered Jan 30 '15 at 23:35

Aweary

2,302
17
26

This works, thanks! Completely forgot about 'paste' event – Jan 31 '15 at 18:27

score 0 · Answer 2 · answered Jan 30 '15 at 23:39

Just add a paste event:

$(function(){
  var limitDiv = $("#limit");
  var limit = limitDiv.data("limit");
  var button = $("input");
  $("textarea").on("keyup paste", function(){
    var total = this.value.length;
    var diff = limit- total;
    var condition = diff < 0 || total === 0;
    limitDiv.text(diff).toggleClass("red", condition);
    button.prop("disabled", condition);
    button.value(total);
  });
})

textarea {
  width: 100%;
  height: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea></textarea>
<input type="button" value="Submit">
<div id="limit" data-limit="15"></div>

Simplify jQuery for detecting change of an input's value

2 Answers2