如何禁用 textarea 的可调整属性?

I want to disable the resizable property of a textarea.

Currently, I can resize a textarea by clicking on the bottom right corner of the textarea and dragging the mouse. How can I disable this?

转载于:https://stackoverflow.com/questions/5235142/how-to-disable-resizable-property-of-textarea

weixin_41568184
叼花硬汉 In my opinion software design is one of the highest levels of art form, and your book analogy doesn't make any sense.
一年多之前 回复
weixin_41568134
MAO-EYE Sometimes you really do want a non-resizeable textarea. For instance, in this case, when you're (conditionally) converting a textarea into something that just looks like a label. It looks really odd to have a label with a random floating grabber way off to the side.
4 年多之前 回复
weixin_41568196
撒拉嘿哟木头 - further, allowing resize in certain situations can break layout and printabilit (an important aspect of a current mission-critical project).
接近 7 年之前 回复
weixin_41568208
北城已荒凉 I disagree. That's like saying make it really easy for a user to remove custom styles from textboxes and buttons. It's my site, and it's my design. I don't want it to look like windows/mac/etc, I want it to look like MY application/site.
大约 7 年之前 回复

16个回答

The following CSS rule disables resizing behavior for textarea elements:

textarea {
  resize: none;
}

To disable it for some (but not all) textareas, there are a couple of options.

To disable a specific textarea with the name attribute set to foo (i.e., <textarea name="foo"></textarea>):

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

Or, using an id attribute (i.e., <textarea id="foo"></textarea>):

#foo {
  resize: none;
}

The W3C page lists possible values for resizing restrictions: none, both, horizontal, vertical, and inherit:

textarea {
  resize: vertical; /* user can resize vertically, but width is fixed */
}

Review a decent compatibility page to see what browsers currently support this feature. As Jon Hulka has commented, the dimensions can be further restrained in CSS using max-width, max-height, min-width, and min-height.

Super important to know:

This property does nothing unless the overflow property is something other than visible, which is the default for most elements. So generally to use this, you'll have to set something like overflow: scroll;

Quote by Chris Coyier, http://css-tricks.com/almanac/properties/r/resize/

csdnceshi78
程序go Too verbose of an answer. They didn't ask how to CSS, they asked for this: textarea {resize: none };
一年多之前 回复
csdnceshi68
local-host Because "disabled" is a state, not a visual property. Thus it's logical that it shouldn't be decided by a styling language.
大约 3 年之前 回复
weixin_41568134
MAO-EYE Am I the only one who finds it weird to set this using css and not attributes? Why can't I then set disabled or checked or other properties using CSS ...
大约 3 年之前 回复
csdnceshi61
derek5. as per davidwalsh.name/textarea-resize - use resize:vertical or resize:horizontal to constrain resizing to one dimension. Or use any of max-width, max-height, min-width and min-height.
接近 7 年之前 回复
weixin_41568183
零零乙 IE and FF3 (and earlier) do not add support resizing, so a solution for them is not needed. For FF4, this solution should work.
8 年多之前 回复
weixin_41568184
叼花硬汉 Is there a solution for Firefox, Opera and/or IE?
8 年多之前 回复

This can be do in html easy

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

This works for me. Default value is true for draggable attribute.

csdnceshi67
bug^君 it won't prevent textarea from resizing
接近 3 年之前 回复
csdnceshi60
℡Wang Yan This working in most browsers. in every latest browser.
接近 4 年之前 回复
csdnceshi56
lrony* This is an HTML 5 attribute, so only newer browsers will support. I read somewhere IE supports it from 9 onwards.
大约 4 年之前 回复

In CSS ...

textarea {
    resize: none;
}
csdnceshi65
larry*wei I personally like this answer better. To the point.
一年多之前 回复

If you need deep support you can use old school technique

textarea {
    max-width:/*desired fixed width*/ px;
    min-width:/*desired fixed width*/ px;
    min-height:/*desired fixed height*/ px;
    max-height:/*desired fixed height*/ px;
}
csdnceshi79
python小菜 Also use resize:none with this solution to prevent the handle appearing in the bottom corner which frustratingly doesn't work.
大约 4 年之前 回复

Adding !important makes it work:

width:325px !important; height:120px !important; outline:none !important;

outline is just to avoid the blue outline on certain browser

csdnceshi55
~Onlooker Don't abuse !important attribute. Meaningless to fix the width & height if CSS attribute resize: none can remove the resize feature
3 年多之前 回复

With @style, you can give it a custom size and disable the resize feature (resize: none;).

@Html.TextAreaFor(model => model.YourProperty, new { @style = "width: 90%; height: 180px; resize: none;" })
csdnceshi53
Lotus@ Hello, thanks for your answer, next time please format the code.
大约一年之前 回复

You can try with jQuery also

$('textarea').css("resize", "none");
csdnceshi53
Lotus@ You should use more jquery. You're not using it enough. :)
一年多之前 回复

I found 2 things

first

textarea{resize:none}

this is a css3 which is not released yet compatable with Firefox4+ chrome and safari

another format feature is to overflow:auto to get rid of the right scrollbar taking into account dir attribute

code and different browsers

Basic html

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <textarea style="overflow:auto;resize:none" rows="13" cols="20"></textarea>
</body>
</html>

Some browsers

  • IE8

enter image description here

  • FF 17.0.1

enter image description here

  • chrome

enter image description here

CSS3 has a new propery for UI elements that will allow you to do this. The property is the resize property. So you would add the following to your stylesheet to disable resizing of all textarea elements:

textarea { resize: none; }

This is a CSS3 property; use a compatibility chart to see browser compatibility.

Personally, I would find it very annoying to have resizing disabled on textarea elements. This is one of those situations where the designer is trying to "break" the user's client. If your design can't accommodate a larger textarea, you might want to reconsider how your design works. Any user can add textarea { resize: both !important; } to their user stylesheet to override your preference.

<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>
共16条数据 1 尾页
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!