如何禁用 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

0
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/

29
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 年多之前 回复

In CSS ...

textarea {
    resize: none;
}
30
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;
}
9
csdnceshi79
python小菜 Also use resize:none with this solution to prevent the handle appearing in the bottom corner which frustratingly doesn't work.
大约 4 年之前 回复

This can be do in html easy

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

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

9
csdnceshi67
bug^君 it won't prevent textarea from resizing
2 年多之前 回复
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 年之前 回复

You simply use: resize: none; in your CSS.

The resize property specifies whether or not an element is resizable by the user.

Note: The resize property applies to elements whose computed overflow value is something other than "visible".

Also resize not supported in IE at the moment.

Here are different properties for resize:

No Resize:

textarea { 
  resize: none; 
}

Resize both ways (vertically & horizontally):

textarea { 
  resize: both; 
}

Resize vertically:

textarea { 
  resize: vertical; 
}

Resize horizontally:

textarea { 
  resize: horizontal; 
}

Also if you have width and height in your CSS or HTML, it will prevent your textarea be resized, with a broader browsers support.

9
<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>
7

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.

5

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

5

try this:

#foo {
    resize: none;
}
<textarea rows="4" cols="50" name="foo" id="foo">
Minisoft is the best Website and Software Development company providing various IT services to individual and corporate clients globally. http://minisoft.com.bd
</textarea>

</div>
5

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

3
共16条数据 1 尾页
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
textarea属性
小弟是ASP新手请问TEXTAREA的文本属性是什么?比如:我一开始就想让TEXTAREA显示:ABC.我该怎么写?rn谢谢,我在线等!
如何禁用Button的AutoPostBack属性
如题
如何禁用标签的disabled属性
例如:rn 前台:rn 链接名称rnrn 后台: this.web.disabled = true ;rnrn我在后台设置了disabled属性,需要在没此链接权限的情况下,链接按钮为灰色。rnrn问题:我改后发现,标签的disabled属性只对系统自带IE有效,其他浏览器却无效果。请问如何通过判断标签的disabled属性是否为true从而对标签的disabled属性进行有效的禁用,方便的话给个例子,谢谢! 如果例子不方便贴出来,麻烦发到我邮箱ll_861027@126.com,谢谢!
css/padding属性如何禁用
问题描述:n为了使ul-li居中对齐,采用text-align:center + display:inline方法n然而网上简单好用的方法拿到实际工作中就各种失效。最后检查问题发现了原因n这是正确的情况:n![图片说明](https://img-ask.csdn.net/upload/201602/14/1455416879_215475.png)n这是错误的情况:n![图片说明](https://img-ask.csdn.net/upload/201602/14/1455416900_110365.png)n竟然只需要将padding:0这个属性禁用掉就好了!n1.不理解为什么,padding:0应该是一个人畜无害的属性才对啊n2.怎么办,既不可能去修改公用的css样式,也不可能不引入这个css文件ncss不存在"解除一个属性定义",只能"复写这个属性定义"n那么应该将padding属性设置成什么呢?n》》》附部分有效代码:nn```n nnn n n 1 标签名称n n 2 标签名称n n 3 标签名称n n 4 标签名称n n 5 标签名称n n 6 标签名称n n 7 标签名称n n n n n```n求解决方案n
textarea 禁用拖动改变大小
    1、标签 &amp;lt;textarea id=&quot;description&quot;&amp;gt;&amp;lt;/textarea&amp;gt;       2、CSS样式规则 #description { resize: none; }    
如何制作可调整的报表
作一个报表,但是格式是固定的,不能由用户自选调整报表格式!rn那种可由用户调整的报表怎么做的?
textarea赋值的属性
textarea标签的赋值 对textarea赋值的时候,应该使用 &lt;textarea&gt;${expert.content}&lt;/textarea&gt; 来赋值。 textarea不像input可以使用value来赋值,故应该在双标签中将要赋予的值放进去 ...
textarea 禁止拉伸的属性
 style=&quot;resize:none&quot; 
textarea中的属性wrap??
wrap的值可以是physical,virtual,这两个属性值有什么区别呢?rn 还有我用CSS在文本框和文本区里加背景图片,加不上去,这是为什么呢?是根本就不能加吗?
html下的textarea的属性?
在表单里面的textarea的边框能不能设置成一个线条状,而不是凹进去的感觉?rn谢谢
关于Textarea的InnerHtmL属性
我给一个变量 html赋值为 rn然后textarea.innerhtml+=htmlrn为什么最后textarea中的内容是rn多出域名来rnrnrnrn部分代码:rn-----------------------------------------------------------------------rnobjname="intro";rnhtml="";rnvar editor_obj =parent.document.all["_" +objname + "_editor"];rnvar isTextarea = (editor_obj.tagName.toLowerCase() == 'textarea');rnrnif (isTextarea) editor_obj.value += html; rnelse editor_obj.contentWindow.document.body.innerHTML += html; rn rn----------------------------------------------------------------------------rnrn在这句中rnif (isTextarea) editor_obj.value += html; rntextarea中会加入比如 rn而在这句中rneditor_obj.contentWindow.document.body.innerHTML += html;rntextare中会加入rn怎么把第二种情况下的绝对域名去掉rnrn
textarea 的value属性
怎么将属性的value值(超文本格式)传递到页面显示时自动按超文本源码转换成页面显示效果。rn如<textarea name="content"> rncontent.value=" adsfa " rn我想实现的是content方本框中显示是一个表格有一行,值是adsfa.rn我试过如果不用方本框,用DIV可以显示出效果,但不能进行编辑。rn请高手帮我看一下,谢谢。希望我表达的能明白。
textarea的rows属性
我用textarea显示一个文本文件,textarea的rows=16,cols=50,font-size=23px,textarea不能显示完整的16行,16行只能显示一半,20,25,26,27可以,21,22,24不可以,这是怎么回事???rn
如何绑定动态生成的TextArea的字体大小属性
[code=XML]rnrn rn rn import mx.controls.TextArea;rn rn [Bindable]rn public var size:uint=12;rn rn rn public function setTextStyles():voidrn rn size=uint(fontSizeCombo.text);rn rn rn rn rn rn 8rn 9rn 10rn 11rn 12rn 14rn 16rn 18rn 20rn 22rn 24rn 26rn 28rn 36rn 48rn 72rn rn rn rn rn rn[/code]rn以上代码是把TextArea的fontSize属性与变量size进行了绑定操作。通过修改ComboBox就可以更新TextArea的字体大小了。rnrn那么如果我是动态生成的TextArea (var ta:TextArea=new TextArea();)要如何对他们属性进行绑定,还是不可以绑定?
textArea没有value 属性 如何显示
&amp;lt;textarea class=&quot;form-control&quot; name =&quot;description&quot; value=&quot;${revit.description}&quot; rows=&quot;5&quot;&amp;gt; &amp;lt;/textarea&amp;gt; 这样值是显示不了的      可以解决办法                 
如何让textarea自动换行-注意wrap属性
&amp;lt;!--content with more link--&amp;gt; html的textarea控件的自动换行是由wrap控制的。wrap属性定义了输入内容大于文本域时显示的方式,其实我们无法使textarea自动换行很多情况都是自己没有加了不该加的属性限制。 你可能没有注意到的它三个属性: 默认值是文本自动换行;当输入内容超过文本域的右边界时会自动转到下一行,而数据在...
LAN属性禁用
注册禁用系统LAN属性的禁用和启用,简单方便。
禁用“本地连接”的“属性”按钮
这个是禁用“本地连接”的“属性”按钮的批处理
组策略禁用网络连接属性
如何使用组策略禁用本地连接的属性,使本地连接的属性是灰的,无法使用
禁用桌面属性
VB通过API函数实现禁用桌面--右键---属性
IE 属性禁用!
很多辅助软件都提供了禁用IE 属性的设置↓rnrn在下听说通过修改“注册表”也可实现IE 属性禁用↓rnrn请问各位高手→怎样修改“注册表”可实现IE 属性禁用?rnrn※请说出在“注册表”的哪个地址修改,和具体键值,谢谢!※rnrn☆我是电脑盲,请高手帮忙☆ rnrn
如何恢复被禁用的本地连接属性的修改
win2000中,开始-设置-网络和拨号连接-本地连接,右键菜单-属性,弹出窗口中,属性按钮灰色,不可用。如何恢复?rn需要两种方法恢复,手工恢复和编程恢复。rn多谢。
如何禁用属性表单中的某个属性页?
如题,定义了一个属性表单,包含两个属性页,rnrn如何实现在一个属性页中禁用另一个属性页,rnrn也就是不能切换到另一个属性页,并弹出提示框。
[请教]:如何禁用图片的Select属性?
就是说在浏览网页时不能选择图片 请教方法
如何禁用win98的系统时间修改属性?
在右下通知栏不显示时间,控制面板中隐藏"日期和时间"
jquery textarea 启用、禁用 判断状态
//禁用 $("#name").attr("disabled",true);  //取消禁用 $("#name").attr("disabled",false);  //判断是否禁用状态 if($("#name").attr("disabled")){ //禁用 }else{ }
请问:如何隐藏textarea的滚动条,是隐藏不是禁用哦
RT,在FF下,具体的效果就是,textarea的大小不变,永远都不变,然后输入文字,其实想要的功能就是和overflow:auto一样,就是要一直不显示滚动条,只要在FF下能用就行,CSS也可以,用js也可以,只要能实现效果就可以了,多谢各位了
textarea有value属性吗?
rn>rn结果现实不是数据库中的值。why?textarea有value属性吗?
使用FCKeditor,修改textarea的属性
小弟刚刚接触FCKeditor,所以对FCKeditor的配置还不是很熟悉,碰到一些问题,希望大虾们能赐教rn1,为什么我是使用FCKeditor时,修改其一些属性时,为什么要把自己浏览器的缓存(临时文件)清理一下,才能看到所修改过的内容?不然,看到的内容还是以前的。rn2,使用FCKeditor时,我修改textarea属性,比如说 wrap属性,如下:rn[code=JScript]rnrn rn[/code]rn运行却没有这个属性的效果,这是为什么呢?rn我想做一个textarea,只能上下滚动,左右不能滚动,除了用wrap属性外,还有什么方法可以实现?rn先谢谢了~~~~~~~~rn
textArea的rows和cols属性的作用?
textArea的rows和cols属性有什么作用啊rn把rows设为 5 rn怎么输入到啦5行之后还可以输入啊 rn
有关与textarea中的cols属性
代码: rn rn rn text:rn rn rn rn rn rn textarea:rn rn rn rn结果却是rn[img=C:\Documents and Settings\Administrator\桌面][/img]rnrn求解啊
98下怎么禁用显示属性
如题
JQuery 开始关闭按钮禁用属性
启用禁用属性:$("#buttonID").attr({"disabled":"disabled"}); 或者 $("#buttonID").attr('disabled','');两着都会给id为buttonID的按钮添加disabled属性。当按钮有该属性以后无法进行点击关闭禁用属性$("#buttonID").removeAttr("disabled");该代码会移除id为buttonID的按
关于span的disabled禁用属性
新增rnrn不管我是在后台还是前台将 lnkAddNew.disabled = true;还是前台将 $("#lnkAddNew").attr("disabled",true); 。当我点击时还能觖发我的targeAddNew方法。我的想法是当我禁用时。点击'lnkAddNew'将不执行任何事件。
注册表禁用网络连接属性 批处理文件
注册表禁用网络连接属性 批处理文件 方便网络管理员快速禁用用户网络属性而不被一般用户破解~
Vue动态改变属性 禁用文本框
data:  
EasyUI-基础可调整大小
@{ Layout = null; } &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta name="viewport" content="width=device-width" /&gt; &lt;title&gt;Index&lt;/title&gt; &lt;script src="~/Scri...
运行后控件的可调整
当我运行后怎么样才能做到像刚开始那样.可以自由的调整大小时.rnrn各位高手帮个忙.
DS1302+1602可调整时间
\Desktop\DS1302+1602可调整时间的实时时钟(用汇编语言编写),难得哦!\DS1302+1602可调整时间的实时时钟(用汇编语言编写),难得哦!.txt
可调整大小的框架
import wx class Frame(wx.Frame): pass class MyApp(wx.App): def OnInit(self): self.frame = Frame(None,id=-1,title=&quot;my first app&quot;,size=(410,340)) self.SetTopWindow(self.frame) ...
相关热词 c#串口测试应用程序 c# 匹配 正则表达式 c#防止窗体重绘 c#读写txt文件 c#挖地雷源代码 c#弹框选项 c# 移除 队列 c# 密码写入配置文件 c# 获取可用内存大小 c# 嵌入excel编辑