PDA

View Full Version : Limit Text Area Input

Basscyst
04-05-2005, 07:10 PM
Here is a script for limiting text area input. It also shows the remaining characters. Simply change the start value for "Characters remaining" to adjust the max length of the form.


<html>
<head>
<script type="text/javascript">

// Original Script By: Adam Matthews
// Date: 05/05/2005
// Posted at: http://www.codingforums.com
var max=0;
function showChar(obj)
{
var obj3=document.getElementById("char");
if(max==0)
{
max=obj3.firstChild.nodeValue*1;
}
len=obj.value.length;
var cur=max*1;
cur=cur-len;
if(cur<0)
{
var obj2=document.forms[0].elements['comm'];
var str=obj2.value.substring(0,max*1);
obj2.value=str;
showChar(obj2,max);
return false;
}
else
{
var obj2=document.getElementById('char');
var str=document.createTextNode(cur);
obj2.replaceChild(str,obj2.firstChild);
return true;
}
}
</script>
</head>
<body>
<form>
<textarea name="comm" cols="20" rows="3" value="" onkeyup="showChar(this);" onblur="showChar(this);"></textarea>
<br />
Characters Remaining: <span id="char">200</span>
</form>
</body>
</html>


Have Fun!
Basscyst
glenngv
04-06-2005, 04:17 AM
With that code, the user can paste long text and get away with the text limit. So you need to also call showChar() on onblur event.
Basscyst
04-06-2005, 09:50 PM
Ha, you are right, but only if you right-click to paste. Good catch. Fixed now.

Basscyst
TheRoper
04-07-2005, 04:40 AM
um... i do it a much simpler way


<html>
<head>
<title>My Page</title>

<script language="javascript" type="text/javascript"><!--

function textCounter() {

var field = document.theForm.comments;
var counter = document.getElementById('remChar');
var maxlimit = 250;

if(field.value.length > maxlimit)
field.value = field.value.substring(0, maxlimit);

else
counter.innerHTML = maxlimit - field.value.length;
}

//--></script>

</head>

<body>

<form name="theForm">
<textarea name="comments" onkeydown="textCounter()" onkeyup="textCounter()" onblur="textCounter()"></textarea>
<br />
<span id="remChar">250</span> remaining characters.
</form>

</body>
</html>


note the "onkeydown" also, to help the numbers keep up...
snowieken
04-07-2005, 10:42 AM
Indeed, TheRoper, I was thinking the same thing exactly. But oh well, as long as it works. Different people have different coding habits.
Basscyst
04-07-2005, 05:55 PM
Simpler, yes. Mine doesn't use innerHTML, and also allows you to edit the html instead of the code to adjust the max length.
Basscyst
TheRoper
04-08-2005, 09:47 AM
i didn't mean to come off as rude... sorry if i did :cool:
either way, i much prefer having the counter as simple text, (ie not in an input field) as most scripts that serve this function are... know what i mean... the first script i found had it in a text box, and i modified it 'cuz textboxes suck :p (for this purpose anyway.)
lawrz
09-07-2005, 04:12 AM
hey guys thanks for the code but i have a situation i know you can fix, my problem is that i want the text to be limited within the row and column limit of the text area and that should not enable scrolling. i hope you guys can provide me with a solution
glenngv
09-07-2005, 06:32 AM
You have to give us more details.
What if a column exceeds the allowed length and there is another row after it?
You will automatically force the exceeded characters to the next row and cascade it downward if needed?
Or you just truncate that particular row and keep the other rows unchanged?
varcharcode
02-14-2006, 08:39 AM
When you use that code, you cannot use 3 text areas with that code in the same page. Now, can you give some similar code like that that can appear on the same page. Or is there a code for text area to absolutely remove the Scrollbar or autoscroll? Thanks