Menu
I have a few areas on my site where I need to limit text input to X amount of characters and it's nice to show a number of spaces left while a user types in, like twitter does.
I found this jquery plugin; jquery max-length plugin
It does just what I need but it seems kind of like overkill, I am not sure the filesize but it looks like a lot of lines of code for such a simple task, do you think I would be better off using a non-jquery method? The reason I was thinking jquery was the way to go is because jquery is already included into all my pages UPDATE;
I just found this non-jquery method that does the exact same thing is is way smaller footprint, so would this be the better method?
<script language="javascript" type="text/javascript">
function limitText(limitField, limitCount, limitNum) {
if (limitField.value.length > limitNum) {
limitField.value = limitField.value.substring(0, limitNum);
} else {
limitCount.value = limitNum - limitField.value.length;
}
}
</script>
You have
<input readonly type="text" name="countdown" size="3" value="1000">
characters left.
349
Very simple in jQuery:
<textarea id="myTextarea"></textarea>
<p id="counter"></p>
<script type="text/javascript">
$('#myTextarea').keyup(function () {
var left = 200 - $(this).val().length;
if (left < 0) {
left = 0;
}
$('#counter').text('Characters left: ' + left);
});
</script>
Substitute the 200 by whatever your limit is.
Note this does not limit the actual text input, it just counts down. You need to check server-side for the input length, this is just a visual helper.
As an aside, I don't think you even should try to limit the input length by denying any input when the limit is reached. It's a pain in the rear usability-wise and can't be relied upon anyway. A simple countdown and server-side checking is the best option IMHO.
155
Sometimes you need to have more than one text area and want them addressed individually without having to code for each. This code dynamically adds the chars remaining to any having a maxLength attribute...
<script type="text/javascript">
$(document).ready(function(){
$('textarea[maxLength]').each(function(){
var tId=$(this).attr("id");
$(this).after('<br><span id="cnt'+tId+'"></span>');
$(this).keyup(function () {
var tId=$(this).attr("id");
var tMax=$(this).attr("maxLength");//case-sensitive, unlike HTML input maxlength
var left = tMax - $(this).val().length;
if (left < 0) left = 0;
$('#cnt'+tId).text('Characters left: ' + left);
}).keyup();
});
});
</script>
<textarea id="myTextarea" maxLength="200">Initial text lorem ipsum blah blah blah</textarea><br><br>
<textarea id="mySecondTextarea" maxLength="500"></textarea><br><br>
<textarea id="textareaWithoutCounter"></textarea>
I've used Aaron Russell's simply countable jQuery plugin with success
Simple usage:
$('#my_textarea').simplyCountable();
Advanced usage:
$('#my_textarea').simplyCountable({
counter: '#counter',
countable: 'characters',
maxCount: 140,
strictMax: false,
countDirection: 'down',
safeClass: 'safe',
overClass: 'over',
thousandSeparator: ','
});
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
$('#TestId').keyup(function(e)
{
var maxLength = 100;
var textlength = this.value.length;
if (textlength >= maxLength)
{
$('#charStatus').html('You cannot write more then ' + maxLength + ' characters!');
this.value = this.value.substring(0, maxLength);
e.preventDefault();
}
else
{
$('#charStatus').html('You have ' + (maxLength - textlength) + ' characters left.');
}
});
});
</script>
</head>
<body>
<textarea id="TestId" cols="20" rows="8"></textarea><br />
(Maximum characters: 100)<br />
<span id="charStatus"></span>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
