Counting the number of characters left in an input field

Bobafart

02-11-2007, 04:38 PM

Hello, I am trying to create a textarea that counts the number of characters that the user is able to input and sets a maximum limit:

<html>
<head>
<script>

<script type="text/javascript">

function limitlength(obj, length){
var maxlength = length; // error log says there is a syntax error here!!
if (obj.value.length>maxlength) {
obj.value=obj.value.substring(0, maxlength)
}
div.documentGetElementByID('keyStrokesLeft').innerHTML = "keystrokes left: " + (maxlength-obj.value.length-length);
}

</script>

</head>
<body>
Enter text (max length is 20 characters):
<form>
<textarea onkeyup="return limitlength(this, 20)" style="width: 300px; height: 90px"></textarea>
<div id="keyStrokesLeft"></div>
</form>
</body>
</html>

Firebug (error checker) keeps giving me the following error:

syntax error: var maxlength = length;

that line looks great... any idea why I am getting this error?

BarrMan

02-11-2007, 04:48 PM

I believe length is a preserved word, try using len instead.

Bobafart

02-11-2007, 04:59 PM

good thought.. I tried it and I get the same error:

<html>
<head>
<script>

<script type="text/javascript">

function limitlength(obj, characterlength){
var maxlength = characterlength;
if (obj.value.length>maxlength) {
obj.value=obj.value.substring(0, maxlength)
}
div.documentGetElementByID('keyStrokesLeft').innerHTML = "keystrokes left: " + (maxlength-obj.value.length);
}

</script>

</head>
<body>
Enter text (max length is 20 characters):
<form>
<textarea onkeyup="return limitlength(this, 20)" style="width: 300px; height: 90px"></textarea>
<div id="keyStrokesLeft"></div>
</form>
</body>
</html>

error:

syntax error: var maxlength = characterlength;

BarrMan

02-11-2007, 05:51 PM

I found couple of errors in your script:
1. there was <script> before <script type="text/javascript">
2. you wrote div.documentGetElementByID which is wrong.

This will work for you:
<html>
<head>
<script type="text/javascript">
function limitlength(obj,characterlength)
{
var maxlength = characterlength;
if (obj.value.length>maxlength) {
obj.value=obj.value.substring(0, maxlength);
}
document.getElementById('keyStrokesLeft').innerHTML = "keystrokes left: " + (maxlength-obj.value.length);
}
</script>

</head>
<body>
Enter text (max length is 20 characters):
<form>
<textarea onkeyup="limitlength(this,20);" style="width: 300px; height: 90px"></textarea>
<div id="keyStrokesLeft"></div>
</form>
</body>
</html>

tonyp12

02-11-2007, 08:24 PM

var maxlength = characterlength

Why set a new variable that is not modified or altered at any point?
(I could see it being done were the original value is later needed)

This should work just as good.

function limitlength(obj,len)
{
if (obj.value.length>len) {
obj.value=obj.value.substring(0, len);

BarrMan

02-11-2007, 10:03 PM

Yup, you're right. Instead of setting a long difficult variable at the function parameters, you'd better set it to a short variable without any help of another variable.
Though it would just make your code more efficient and not your script loading time faster.