0

I am using the following JavaScript function to limit the chars in a textarea:

function limit(element, max_chars)
{
    if(element.value.length > max_chars)
        element.value = element.value.substr(0, max_chars);
}

<textarea onkeyup="javascript:limit(this, 4000)"></textarea>

When entering long text in the textarea in Firefox and when the limit is reached, the focus is back to the top of the textarea and the textarea itself acts weirdly. In other browsers everything is fine. Is there a way to resolve that problem or another way to limit chars / remove extra chars with JavaScript?

Thank you!

user977191
  • 821
  • 2
  • 9
  • 11
  • 2
    Don't mess with the value, that is *really* annoying. Just give the user a prompt for how many characters have been entered, don't restrict them (see the SO comment prompt below the bottom left corner). Let the user work out how to trim the content. – RobG Oct 04 '11 at 03:08
  • I totally agree with @RobG. Please refrain from annoying the user. Let them type as many characters as they want. Just warn them when they go over the limit. – NullUserException Oct 04 '11 at 03:13
  • RobG : I like the idea, thanks. – user977191 Oct 04 '11 at 03:20

3 Answers3

2

Can you just use the maxlength property for a textarea verse having to rely on JS? Or am I missing something?

<textarea maxlength="10"></textarea>

EDIT:

Works in all browsers that support HTML5. If you need support for older browsers you might want to check out this link:

How to impose maxlength on textArea in HTML using JavaScript

HTML5 Info:

http://www.w3schools.com/html5/tag_textarea.asp

Community
  • 1
  • 1
  • [Maxlength](http://www.w3.org/TR/html401/interact/forms.html#adef-maxlength) doesn't apply to textarea elements, it's for inputs. – RobG Oct 04 '11 at 03:06
  • maxlength is html5 (for textareas), not cross-browser compatible. Would have been the best idea. – user977191 Oct 04 '11 at 03:06
  • RobG: "The maxlength attribute is new for the – user977191 Oct 04 '11 at 03:14
  • *Please* don't reference w3schools, if you're quoting HTML5, then reference it: [HTML5 textarea maxlength](http://www.w3.org/TR/html5/the-button-element.html#attr-textarea-maxlength). Yeah, it's been added to textarea but HTML5 isn't a standard nor widely supported yet. – RobG Oct 04 '11 at 03:23
0
<script type="text/javascript">

/***********************************************
* Textarea Maxlength script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

function imposeMaxLength(obj){
var mlength=obj.getAttribute? parseInt(obj.getAttribute("maxlength")) : ""
if (obj.getAttribute && obj.value.length>mlength)
obj.value=obj.value.substring(0,mlength)
}

</script>

<textarea maxlength="40" onkeyup="return ismaxlength(this)"></textarea>
Dennis
  • 14,264
  • 2
  • 48
  • 57
  • Yeah... Well, this works for firefox and Chrome, the original solution works for IE. We're done. – Dennis Oct 04 '11 at 03:21
0

HTML:

<!-- Use maxlength for browsers that support it -->
<textarea maxlength="4000" onkeypress="restrictLength(this, event)"></textarea>

JavaScript:

function restrictLength(reference, event) {
    // Retrieve maxChars from "maxlength" attribute;
    // otherwise, default to 4000
    var maxChars = reference.getAttribute("maxlength") ? parseInt(reference.getAttribute("maxlength")) : 4000;

    // Stop event from propagating up the event chain
    event.stopPropagation();

    // Test if length > maxChars
    if (reference.value.length > maxChars) {
        event.preventDefault ? event.preventDefault() : event.returnValue = false;
    }
}
Kevin Ji
  • 10,479
  • 4
  • 40
  • 63