Warn if an input's length is close to it's max

warn on max chars

// bind the listener and config via data-attributes
// <textarea data-maxwarn="true" data-maxchars="20" data-warnclass='too-many-characters'></textarea>


$(document).on('keyup', '[data-maxwarn=true]', function(e){
    var tf = $(e.target); 
    var max = tf.data('maxchars');

    if(tf.val().length > max - 10){
        tf.data('hitmax', 'true');
        tf.addClass(tf.data('warnclass'));
    } else if(tf.data('hitmax') === 'true' && tf.val().length < max - 10){
        tf.removeClass(tf.data('warnclass'));
    }
});