[DHTML] Form Field Limiter

**Twey** · 04-07-2007, 05:23 PM

1) CODE TITLE: Form Field Limiter

2) AUTHOR NAME/NOTES: Twey, http://www.twey.co.uk/

3) DESCRIPTION: An object to control limited-length form fields, with a great deal more flexibility than that offered by the HTML maxlen attribute.

4) URL TO CODE: http://www.twey.co.uk/?q=limiter

**mburt** · 04-07-2007, 05:25 PM

Nice script. This will be useful, considering alot of people ask how to do this.
Wouldn't the basic object.substring(0,maxlength); work though?

**Twey** · 04-07-2007, 05:33 PM

Hey, it wasn't my idea, I just rewrote this piece of crud

**mburt** · 04-07-2007, 05:51 PM

Err... what's wrong with:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>max length</title>
<script type="text/javascript">
function loadMax(el,max) {
  var end = document.createElement("div");
  el.load = function() {
    var charc = max-el.value.length,str=document.createTextNode("There are "+charc+" characters remaining.");
    while (f=end.firstChild) end.removeChild(f);
    end.appendChild(str);
    }
  el.load();
  el.parentNode.appendChild(end);
  el.onkeydown = function() {
    el.value=el.value.substring(0,max);
    el.load();
    }
  }
</script>
</head>
<body>
<form name="myForm">
	<input type="text" name="foo">
</form>
<script type="text/javascript">
loadMax(document.forms['myForm'].foo,10);
</script>
</body>
</html>

//EDIT: created a work-around for the weird positioning:

Code:

<form name="myForm">
	<div>
		<input type="text" name="foo">
	</div>
	<div>
		<textarea name="test"></textarea>
	</div>
</form>

**Twey** · 04-07-2007, 06:09 PM

Several big fat memory leaks in IE, for a start

Also, doesn't offer any more flexibility than the original, it's still difficult to position the output correctly, doesn't give any options to style the output, doesn't indicate the length limit to non-JS browsers, &c. Most of those aren't problems, of course, per se, but just features found in mine and not that one... why'd you rewrite it again? Go and find your own antiquated script to do up

**mburt** · 04-07-2007, 06:13 PM

Technically I didn't rewrite it... I started from scratch

(not incredibly hard, by the way). I'll have a closer look at yours, but to be honest, it looked exactly the same as the old one.
I'm just saying mine is simpler, nothing less.

And what exactly is this "big fat" security leak in IE?

**Twey** · 04-07-2007, 06:19 PM

The effect is the same (with a couple of optional extras), but it's achieved using better code: "rewritten."

And what exactly is this "big" security leak in IE?

You've got a DOM element trapped in the onkeydown() and load() closures, and also referenced circularly by both: el references load references el.

**mburt** · 04-07-2007, 06:23 PM

and also referenced circularly by both: el references load references el.

Actually, it doesn't.
el.load():

Code:

    var charc = max-el.value.length,str=document.createTextNode("There are "+charc+" characters remaining.");
    while (f=end.firstChild) end.removeChild(f);
    end.appendChild(str);

All it does is set the charc variable, nothing else. It doesn't once use el as a reference, it's just an "updating" function later called in the onkeydown() handler. I don't know how this would end up in a loop. Could you clarify? (sorry if I'm being annoying, but I don't really understand)