You are viewing a plain text version of this content. The canonical link for it is here.
Posted to user@click.apache.org by Larry Bunton <la...@yahoo.com.au> on 2011/08/04 09:13:08 UTC
Setting Text Area Maximum Length
Hi All,
I needed to restrict the length of a TextArea for a client project. The problem is the TextArea control setMaximum doesn't work in the browser it is a server side check. This is probably due to Html TextArea doesn't have a maxLength property.
The following URL shows a work around using JavaScript:
http://jsfiddle.net/n97Xr/7/
To get this working for I have added the script and hard coded part of my form in my htm template:
<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;
}
}
function keypressHandler(ele) {
limitText(ele,document.uploadForm.uploadForm_description_countdown,200);
}
</script>
....
<div>
$uploadForm.startTag()
<p>$uploadForm.fields.file</p>
<label for="$uploadForm.fields.description.name"><b>Enter a Description</b> <span class="text">( Optional )</span></label>
<br>
<textarea id="uploadForm_description" cols="36" rows="3" onkeypress="keypressHandler(this)" name="description" ></textarea>
<br>
Maximum characters: 200
<br>
You have <input readonly type="text" name="uploadForm_description_countdown" size="3" value="200"> characters left.
<p>
$uploadForm.fields.Attach
$uploadForm.fields.Cancel
</p>
$uploadForm.endTag()
</div>
...
This seems something that may be better integrated into the Click standard TextArea control. My first though was when setMaxLength(maxLength) is set.
Cheers
Larry Bunton
Re: Setting Text Area Maximum Length
Posted by Larry Bunton <la...@yahoo.com.au>.
Hi Bob,
Sorry I should have qualified it as html4 doesn't support maxlength for text area's.
Alas we have to support older browser versions that don't support html5. :(
Maybe this could be an extension control?
Cheers
Larry
From: Bob Schellink <sa...@gmail.com>
To: user@click.apache.org; Larry Bunton <la...@yahoo.com.au>
Sent: Thursday, 4 August 2011 5:24 PM
Subject: Re: Setting Text Area Maximum Length
Hi Larry,
TextArea does have maxlength property in HTML5:
http://www.w3schools.com/html5/showit.asp?filename=tryhtml5_textarea_maxlength
Ttested in FF5.
One problem with JS based solutions is that the textarea flickers once
the max length is reached as text is cut off.
Kind regards
Bob
On Thu, Aug 4, 2011 at 9:13 AM, Larry Bunton <la...@yahoo.com.au> wrote:
> Hi All,
> I needed to restrict the length of a TextArea for a client project. The
> problem is the TextArea control setMaximum doesn't work in the browser it is
> a server side check. This is probably due to Html TextArea doesn't have a
> maxLength property.
> The following URL shows a work around using JavaScript:
> http://jsfiddle.net/n97Xr/7/
>
> To get this working for I have added the script and hard coded part of my
> form in my htm template:
>
> <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;
> }
> }
>
> function keypressHandler(ele) {
>
> limitText(ele,document.uploadForm.uploadForm_description_countdown,200);
>
> }
> </script>
> ....
> <div>
> $uploadForm.startTag()
> <p>$uploadForm.fields.file</p>
> <label for="$uploadForm.fields.description.name"><b>Enter a
> Description</b> <span class="text">( Optional )</span></label>
> <br>
> <textarea id="uploadForm_description" cols="36" rows="3"
> onkeypress="keypressHandler(this)" name="description" ></textarea>
> <br>
> Maximum characters: 200
> <br>
> You have <input readonly type="text"
> name="uploadForm_description_countdown" size="3" value="200"> characters
> left.
> <p>
> $uploadForm.fields.Attach
> $uploadForm.fields.Cancel
> </p>
> $uploadForm.endTag()
> </div>
> ...
>
> This seems something that may be better integrated into the Click standard
> TextArea control. My first though was when setMaxLength(maxLength) is set.
>
> Cheers
>
> Larry Bunton
>
>
Re: Setting Text Area Maximum Length
Posted by Bob Schellink <sa...@gmail.com>.
Hi Larry,
TextArea does have maxlength property in HTML5:
http://www.w3schools.com/html5/showit.asp?filename=tryhtml5_textarea_maxlength
Ttested in FF5.
One problem with JS based solutions is that the textarea flickers once
the max length is reached as text is cut off.
Kind regards
Bob
On Thu, Aug 4, 2011 at 9:13 AM, Larry Bunton <la...@yahoo.com.au> wrote:
> Hi All,
> I needed to restrict the length of a TextArea for a client project. The
> problem is the TextArea control setMaximum doesn't work in the browser it is
> a server side check. This is probably due to Html TextArea doesn't have a
> maxLength property.
> The following URL shows a work around using JavaScript:
> http://jsfiddle.net/n97Xr/7/
>
> To get this working for I have added the script and hard coded part of my
> form in my htm template:
>
> <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;
> }
> }
>
> function keypressHandler(ele) {
>
> limitText(ele,document.uploadForm.uploadForm_description_countdown,200);
>
> }
> </script>
> ....
> <div>
> $uploadForm.startTag()
> <p>$uploadForm.fields.file</p>
> <label for="$uploadForm.fields.description.name"><b>Enter a
> Description</b> <span class="text">( Optional )</span></label>
> <br>
> <textarea id="uploadForm_description" cols="36" rows="3"
> onkeypress="keypressHandler(this)" name="description" ></textarea>
> <br>
> Maximum characters: 200
> <br>
> You have <input readonly type="text"
> name="uploadForm_description_countdown" size="3" value="200"> characters
> left.
> <p>
> $uploadForm.fields.Attach
> $uploadForm.fields.Cancel
> </p>
> $uploadForm.endTag()
> </div>
> ...
>
> This seems something that may be better integrated into the Click standard
> TextArea control. My first though was when setMaxLength(maxLength) is set.
>
> Cheers
>
> Larry Bunton
>
>