I want the character counting code to work on multiple inputs but I can't figure out how to implement an each function on my keyup so that the .char-count works on the closest .input
function checkTextAreaMaxLength(textBox, e) {
var maxLength = parseInt($(textBox).data("length"));
if (!checkSpecialKeys(e)) {
if (textBox.value.length > maxLength - 1)
textBox.value = textBox.value.substring(0, maxLength);
}
$(".char-count").html(maxLength - textBox.value.length);
return true;
}
function checkSpecialKeys(e) {
if (
e.keyCode != 8 &&
e.keyCode != 46 &&
e.keyCode != 37 &&
e.keyCode != 38 &&
e.keyCode != 39 &&
e.keyCode != 40
)
return false;
else return true;
}
$(".input").on("keyup", function(event) {
checkTextAreaMaxLength(this, event);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
<textarea class='input' rows='3' data-length=250 data-min-rows='3'></textarea>
<h4><span class="char-count">250</span> chars remaining</h4>
</div>
<div class="item">
<input class='input' data-length=120/>
<h4><span class="char-count">120</span> chars remaining</h4>
</div>Just reduce your selector using DOM traversal. There are many ways to do this. Here's one approach using an ancestor element:
$(textBox).closest('.item').find('.char-count').html(maxLength - textBox.value.length);
Another would be to use a sibling selector:
$(textBox).siblings().find('.char-count').html(maxLength - textBox.value.length);
Or, more specifically, the next element selector:
$(textBox).next().find('.char-count').html(maxLength - textBox.value.length);
I like to be a little more specific with the ancestor selector in case the interior markup structure changes. parent() is fragile sometimes. If you were to add a wrapper around the input for layout purposes, for example (as in when using Bootstrap), parent() is no longer appropriate and your script breaks. I find it more durable to target the outermost element in your markup group. The same idea is true of siblings() and next(). It's better to leave some flexibility in your selector.
function checkTextAreaMaxLength(textBox, e) {
var maxLength = parseInt($(textBox).data("length"));
if (!checkSpecialKeys(e)) {
if (textBox.value.length > maxLength - 1)
textBox.value = textBox.value.substring(0, maxLength);
}
$(textBox).closest('.item').find('.char-count').html(maxLength - textBox.value.length);
return true;
}
function checkSpecialKeys(e) {
if (
e.keyCode != 8 &&
e.keyCode != 46 &&
e.keyCode != 37 &&
e.keyCode != 38 &&
e.keyCode != 39 &&
e.keyCode != 40
)
return false;
else return true;
}
$(".input").on("keyup", function(event) {
checkTextAreaMaxLength(this, event);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
<textarea class='input' rows='3' data-length=250 data-min-rows='3'></textarea>
<h4><span class="char-count">250</span> chars remaining</h4>
</div>
<div class="item">
<input class='input' data-length=120></input>
<h4><span class="char-count">120</span> chars remaining</h4>
</div>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments