I have a problem with downloading and displaying the value, when set to “rigidly” maxLenght – everything works fine, but when I want the script to download the value myself, I have a problem.
The script is supposed to get the value maxlenght = “” from each and after typing by the user it will print out how many characters are left.
var maxLen = document.getElementsByClassName("handlerWorld").maxLength;
function countChar(jqObj) {
var len = jqObj.val().length;
var diff = maxLen - len;
if (len > maxLen) {
len = maxLen;
diff = 0;
}
jqObj.val(jqObj.val().substr(0, len)).prev('label').find('span.chars-twenty').text(diff);
}
$(document).ready(function () {
$("[class*='handlerWorld']").keyup(function () {
countChar($(this));
}).each(function () {
countChar($(this));
});
});
My HTML:
<div class="form-group">
<label for="nameIput">Nazwa firmy <span>Remaining: <span class="chars-twenty"></span></label>
<input type="text" id="name" maxlength="140" name="name" class="form-control handlerWorld">
</div>
<div class="form-group">
<label for="urlInput">URL <span>Remaining: <span class="chars-twenty"></span></label>
<input type="text" id="url" name="url" maxlength="100" class="form-control handlerWorld">
</div>