Detecting when a scrollbar appears on texarea

Question

I know this question has been asked here . Basically the solution works but they are using an old version of jquery and the solution was implemented using deprecated functions. So I tried to migrate to the new version, according to answers and questions from this question .

So basically the solution using the old jquery version is this one.

$('textarea.paginate').live('keydown', function(event) {
    if (this.clientHeight < this.scrollHeight) {
        alert("Please Something);
    }
});

This was my migration to the on function, but neither way works. Demo of the example: http://jsbin.com/saxay/1/edit

What I'm doing wrong?

$("textarea").on('keyup','.note-codable',function(event){
  if(event.keyCode == 13) { }
  if (this.clientHeight < this.scrollHeight) {
    alert("Please Something");
  }
});

$(document).on('keyup','.note-codable',function(event){
  if(event.keyCode == 13) { }
  if (this.clientHeight < this.scrollHeight) {
    alert("Please Something");
  }
});

Answer 1

UPDATED

try this approach: DEMO

$.fn.hasVerticalScrollBar = function() {
    if (this[0].clientHeight < this[0].scrollHeight) {
        return true
    } else {
        return false
    }
};

$(document).on('keydown','.note-codable',function(event){
    if(event.keyCode == 13) { }
    if ($(this).hasVerticalScrollBar()) {
        alert("Please Something");
    }
});

also if you notice I've changed the keyup event to keydown which is better in my opinion 'cause when the user holds their finger down on a button the code wouldn't be fired if it is on the keyup event.

Answer 2

Fixed your problem

You just had to use .on at the place of live in your first approach.

$('textarea.paginate').on('keydown', function(event) {

    // scrollbars apreared
    if (this.clientHeight < this.scrollHeight) {

       alert("Please add a new card for having a better format. Remember this is a WYSIWYG");

    }

});

DEMO