Prevent resizing of HTML textarea in browser

Newer versions of Webkit based browsers (Safari & Chrome) as well as Firefox now allow users to resize HTML <textarea> elements by default. This can have unpredictable results on your user interfaces. Thankfully, you need only add a simple CSS attribute to prevent this newly default behavior.

textarea {resize:none;}

REFERENCES:

TEXTAREA maxlength – or lack of!

I’m not sure why this was previously overlooked in HTML4/XHTML1, but it’s been a real pain for developers for years. The ‘rows’ and ‘cols’ attributes are useless (like ‘size’ is in the INPUT tag) as they are based on display size of fixed-width fonts like Courier and not the actual input limitations. INPUT has always supported a ‘maxlength’ attribute for this purpose.

Good news, this is part of WebForms2 and HTML5 (proposal) plans to add it!

A decent fix that I currently use… optimally you would use a common ‘maxsize’ function.

[textarea name=”junit” id=”junit” onkeyup=”maxsize(this,100);”][/textarea]
[script type=”text/javascript”]
function maxsize(obj,mx){
if(obj.value.length>mx)
{
obj.value=obj.value.substring(0,mx); }
}
[/script]

WARNING:

You should ALWAYS perform server-side validation of the length too, otherwise you leave the door open for someone to hack your form and submit longer data.

References:

Cheers!