Turn off textarea resizing

I'm trying to turn off textarea resizing in my site; right now I'm using this method:

.textarea {
clear:left;
min-width: 267px;
max-width: 267px;
min-height:150px;
max-height:150px;
}

I know that my method is not correct and I'm searching for a better one in JavaScript. I'm a beginner, so the best solution for me will be HTML5 or jQuery.

223047 次浏览
小开
最佳答案

Try this CSS to disable resizing

The CSS to disable resizing for all textareas looks like this:

textarea {
resize: none;
}

You could instead just assign it to a single textarea by name (where the textarea HTML is ):

textarea[name=foo] {
resize: none;
}

Or by id (where the textarea HTML is ):

#foo {
resize: none;
}

Taken from: http://www.electrictoolbox.com/disable-textarea-resizing-safari-chrome/

小开

this will do your job 

  textarea{
resize:none;
}

enter image description here

小开

It can done easy by just using html draggable attribute

<textarea name="mytextarea" draggable="false"></textarea>

Default value is true.

小开

CSS3 can solve this problem. Unfortunately it's only supported on 60% of used browsers nowadays.

For IE and iOS you can't turn off resizing but you can limit the textarea dimension by setting its width and height.

/* One can also turn on/off specific axis. Defaults to both on. */
textarea { resize:vertical; } /* none|horizontal|vertical|both */

See Demo

小开

Just one extra option, if you want to revert the default behaviour for all textareas in the application, you could add the following to your CSS:

textarea:not([resize="true"]) {
resize: none !important;
}

And do the following to enable where you want resizing:

<textarea resize="true"></textarea>

Have in mind this solution might not work in all browsers you may want to support. You can check the list of support for resize here: http://caniuse.com/#feat=css-resize

小开 
//CSS:
.textarea {
resize: none;
min-width: //-> Integer number of pixels
min-height: //-> Integer number of pixels
max-width: //-> min-width
max-height: //-> min-height
}

above code works on most browsers

//HTML:
<textarea id='textarea' draggable='false'></textarea>

do both for it to work on the maximum number of browsers

小开

As per the question, i have listed the answers in javascript

By Selecting TagName

document.getElementsByTagName('textarea')[0].style.resize = "none";

By Selecting Id

document.getElementById('textArea').style.resize = "none";
小开

This is works for me

<textarea
type='text'
style="resize: none"
>
Some text
</textarea>


提交答案