JSFiddle - React, Tailwind, and code Playground
HTML
<textarea maxlength="15">1234567890</textarea>
<!-- input[type="text"] already supports maxlength attribute -->
<input type="text" maxlength="15" value="1234567890" />
<div id="console"></div>
CSS
textarea {
height: 5em;
width:100%
}
input[type="text"] {
width:100%
}
#console {
width: 100%;
border: 1px solid #000;
}
JavaScript
// textarea event handler to add support for maxlength attribute
$(document).on('input keyup', 'textarea[maxlength]', function(e) {
// maxlength attribute does not in IE prior to IE10
// http://stackoverflow.com/q/4717168/740639
var $this = $(this);
var maxlength = $this.attr('maxlength');
if (!!maxlength) {
var text = $this.val();
if (text.length > maxlength) {
// truncate excess text (in the case of a paste)
$this.val(text.substring(0,maxlength));
e.preventDefault();
}
}
});
function log(message) {
$('#console').html($('#console').html() + ', ' +message);
}