如何禁用 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).
6 年多之前 回复
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.
6 年多之前 回复
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.
3 年多之前 回复
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 禁止拉伸的属性
 style=&quot;resize:none&quot; 
jquery textarea 启用、禁用 判断状态
//禁用rn$("#name").attr("disabled",true); rnrnrnrn//取消禁用rn$("#name").attr("disabled",false); rnrnrnrn//判断是否禁用状态rnif($("#name").attr("disabled")){rn//禁用 rn}else{rnrn}
textarea中禁止换行
htmln<textarea onkeydown="checkEnter(event)"></textarea>
解决input、textarea里使用disable属性文字变灰问题
今天用ios测试了移动web项目,发现textarea里明明设置了文字颜色,但是却非常看不清楚rn仔细找了一下,发现是disable的问题rn找了一下替代的属性,找到了下面这个属性rnreadonly="readonly"rn引用一段定义和用法:rnrnrnreadonly 属性规定输入字段为只读。rnrn只读字段是不能修改的。不过,用户仍然可以使用 tab 键切换到该字段,还可以选中或拷贝其文本
Vue中改变input,textarea中使用disabled属性的字体颜色
Ps→无奈:要输就输给追求,要嫁就嫁给幸福。nn前言:相信很多猿友碰到过需要禁止输入的文本框之类的业务,有两个属性可以使用。n1.redonly属性,字体颜色默认黑色,但是没有精致输入的标志,鼠标仍然可以点击到文本框内,体验感不好。n2.disabled属性,字体颜色默认为浅灰色,有明显的鼠标禁止输入标志,但是在光线强的情况下很难看清楚内容是什么。n此文就是鄙人自己做个记录,修改disabled属...
textarea 只显示内容,禁止输入或编辑
加个readonly 就OK了的 n
解决在ios手机中 input和textarea添加disabled属性的时候显示有重影
解决在ios手机中 input和textarea添加disabled属性的时候显示有重影rn        因为ios默认了disabled属性时透明度为0.8;rn设置input:disabled, input[disabled]{ -webkit-opacity:1; opacity: 1; }
textarea中屏蔽回车默认换行
我司网页版聊天里,用到多行文本框textarea,但是并没有清除默认回车事件,然后找了下解决方案,核心代码如下rnrnrnrn"test">  rn"text/javascript">  rn  var test= document.getElementById("test");  rn test.onkeydown = function(e){  rn    send(e);  rn }  rn
【微信小程序】TextArea的坑
今天遇到一个textArea的坑,先上个图。1.点击“选择内容反馈”,弹出action-sheet时,有时点击第一个条目“讲太快”,textArea会把焦点劫走。2.解决方法,当actionsheet显示时,设置textarea的disabled属性为true. 即将textarea的disabled属性置为action-sheet的hiddden属性的取反值。...
textarea禁止拖拽设置
设置textarea禁止拖拽右下角改变大小nnn&amp;lt;textarea style=&quot;resize:none;&quot;&amp;gt;&amp;lt;/textarea&amp;gt;nn 
textarea的拼写检查,spellcheck
spellcheck="false"rnrnrnhaha haha
CSS——textarea多行文本框禁止拖动问题解决
很简单:rntextarea{rnresize:none;rn}rnrnrn就OK了!!!
禁止textarea拉伸
style="resize:none"
JS设置页面form内的所有元素(input textarea select)为只读属性
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190222142611744.jpg)nnn
js 控制表单input,textarea select为只读模式
 $(&quot;#form input&quot;).attr('readonly','readonly');   $(&quot;#form textarea&quot;).attr('readonly','readonly');            $(&quot;#form select&quot;).attr('readonly','readonly');
textarea没有Value属性?关于如何去设置textarea的默认显示的文字?
今天做一个项目的时候,要在一个编辑的jsp页面的textarea标签设置value属性,结果发现他没有value属性,但是是编辑页面又必须要回显要修改的内容.nn&amp;lt;textarea class=&quot;form-control&quot; name =&quot;description&quot;n value=&quot;${revit.description}&quot; rows=&quot;5&quot;&amp;gt; ...
textarea文本域及高度自适应
使用很简单,一个普通的block元素上加个contenteditable="true"就ok了,如下:
textarea没有value属性,如何赋值?
n n n 错误做法n &amp;lt;textarea class=&quot;form-control&quot; name=&quot;title&quot; id=&quot;title&quot; value=&quot;{$title|default=''}&quot; style=&quot;height: 50px;&quot;n placeholder=&quot;请填写基金名称
[转]屏蔽TextArea中默认的按回车换行
[url]http://we.zuisg.com/flex/%E5%B1%8F%E8%94%BDtextarea%E4%B8%AD%E9%BB%98%E8%AE%A4%E7%9A%84%E6%8C%89%E5%9B%9E%E8%BD%A6%E6%8D%A2%E8%A1%8C/[/url]rnrn在Flash开发中,当我们使用TextArea组件时,在输入文本时按下回车键默认会进行换行。如果不想让它...
textarea赋值的属性
textarea标签的赋值n对textarea赋值的时候,应该使用 n &lt;textarea&gt;${expert.content}&lt;/textarea&gt;n 来赋值。n textarea不像input可以使用value来赋值,故应该在双标签中将要赋予的值放进去nnn...
Vue动态改变属性 禁用文本框
data:nn nn
form 表单中 disabled 属性的元素不参与表单提交
示例代码:nnform id="saveForm">nn input id="saveForm-age" name="age" disabled="disabled" />nn input id="saveForm-age" name="age" disabled="true" />nnform>nn当上述两种写法出现时,表单提交的数据中,将不包括 age 这个属性,这是因为 inpu
textarea标签 禁止拉伸
千古兴亡多少事,悠悠,不尽长江滚滚流 n&amp;amp;lt;textarea&amp;amp;gt; 标签定义多行的文本输入控件。nn文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier)。nn可以通过 cols 和 rows 属性来规定 textarea 的尺寸,不过更好的办法是使用 CSS 的 height 和 width 属性。nn禁止文本域拉伸的样式是:nnstyle=&amp;quot;resize:...
textarea 禁止拉动拖动改变大小
n      标签 textarea 在大部分浏览器中只要指定行(rows)和列(cols)属性,就可以规定 textarea 的尺寸,大小就不会改变,不过更好的办法是使用 CSS 的 height 和 width 属性。rn      但是Chrome,Safari和FireFox渲染的效果不同,可以拖动右下角图标改变大小。但是过分拖动大小会影响页面布局,使页面变得不美 观。可以通过添加如下两个...
js控制textarea禁止输入表情
在网页中控制textarea不能输入表情:<textarea onkeyup="this.value=this.value.replace(/\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g,'')"></textarea>只需要在textarea中输入事件中进行正则过滤即可实现代码为replace(/\uD83C[\uDF00-\uDFFF]|\uD83
textArea没有value 属性 如何显示
n &amp;lt;textarea class=&quot;form-control&quot; name =&quot;description&quot; value=&quot;${revit.description}&quot; rows=&quot;5&quot;&amp;gt;n n &amp;lt;/textarea&amp;gt;nn这样值是显示不了的 nn nn nn可以解决办法nn                nnn
textarea不可编辑得解决方法
有两种解决方法:1、使用disabled属性: [plain] view plain copy&amp;lt;textarea name=&quot;&quot; cols=&quot;&quot; rows=&quot;&quot; disabled&amp;gt;加油,加加油!&amp;lt;/textarea&amp;gt;  2、使用readonly属性: [plain] view plain copy&amp;lt;textarea name=&quot;&quot; cols=&quot;&qu
css修改input、textarea标签placeholder属性默认文字颜色
textarea::-webkit-input-placeholder {n /* WebKit browsers */n color: #9e9e9e;n }n textarea:-moz-placeholder {n /* Mozilla Firefox 4 to 18 */n color: #9e9e9e;n ...
textarea 文本框禁止拖动改变大小
火狐/chrome  /safari   ntextarea文本框可以拖动改变大小。n   只要给textarea添加一个css属性就可以禁止此功能,具体代码如下:n textarea{n resize:none;n }
input、textarea中placeholder属性设置的兼容性问题
一、问题描述rn问题很简单:input和textarea包含其中的placeholder的自带属性实在有点闹心,因此需要对它们超微美化一下。然而问题就来了。rn先附效果图:rnfirefox下是这样子滴~rnrnrnie:rnrnrn最后是chrome:rnrnrn代码如下:rnrnrn经过本人各种尝试,终于成功。着重看红框圈出来的地方是不是超微有些不同呢?rn二、深入探索rn首先让我们共同回忆下
textarea禁止拉伸和禁止编辑
一、textarea禁止拉伸方法:n设置style:“ resize:none;”n// 禁止拉伸代码n &amp;lt;textarea style=&quot;resize:none;&quot; &amp;gt;自己设置宽高即可&amp;lt;/textarea&amp;gt;nn效果:nn二、textarea禁止编辑方法:n(1)设置模式为只读 :readonlyn//readonly 可复制不可编辑n &amp;lt;textarea type=...
textarea禁止拖拽、去掉右下角三角
textarea{nnresize:none;nnborder:none;nn}nn~but  亲测移动端uc浏览器下三角依旧存在
JQuery为textarea添加maxlength属性并且兼容IE
// JQuery为textarea添加maxlengthrnrn    // textarea默认不支持maxlength属性。rnrn    // 通过JQuery的keyup事件:rnrnrnrn $(function(){rnrn    //IE也能用textarearnrn    $("textarea[maxlength]").keyup(function(){rnrn    var
css文本域禁止横向拖动
1、textarea文本域是可以横向,纵向拖动的rn但是有时候需要约束,禁止横向拖动;只要追加样式:rntextarea{rn resize:vertical;rn }rn即可实现禁止横向拖动;rn同样,当resize的属性为none时,则禁止拖动
input的disabled属性会导致无法上传
如题 很多人会用disable禁止用户修改input的值 rn但是同时会导致form提交时不包含这个文本框的值 rn(disabled本意即为禁用 所以自然不会上传)需要实现禁止修改可以使用readonly属性
IOS系统 Input或者textarea Disabled默认样式问题
问题:Input或者textarea在设置了disable之后在安卓手机上显示正常,但ios系统手机上就会显示背景为半透明,字体颜色为灰色。rn解决方法:rninput:disabled, textarea:diabled {n -webkit-text-fill-color: #000;n -webkit-opacity: 1;n color: #000;n}
textArea标签没有value属性,,,以及jquery如何获取textarea文本域的值
jQuery的.val()方法是专门用来获取表单元素值的,而textarea也属于表单元素所以可以直接用.val()方法获取。rnrnrnrn不过要注意,由于textarea是个双标记因此.text()或.html()方法也可以获取到其中的信息,但建议不要这样获取,因为.val()是专用于获取值的方法,比.text()或.html()更可靠。rnrn看下面的例子:rnrnrnrnrnrn1rnrn
一、 layui富文本框layedit的使用及内容的禁用
layui富文本框layedit的使用及内容的禁用n参考网址:https://www.layui.com/doc/modules/layedit.htmlnn使用。官网实例展示n&amp;lt;textarea id=&quot;demo&quot; style=&quot;display: none;&quot;&amp;gt;&amp;lt;/textarea&amp;gt;nn&amp;lt;script&amp;gt;nnlayui.use('layedit', functi...
html textarea标签的innerHTML属性和value属性的区别
居然有人说, html textarea标签的innerHTML属性和value属性是一致的, 我晕, 看代码:nnnnnAAAnnntestnnnfunction test()n{n var obj = document.getElementById("my");n alert(obj.value);n alert(obj.innerHTML);nn}nnnn       此时,
使用多行文本Textarea大小设置与resize属性结合使用
在此文中,我将和大家分享一下多行文本区域大小的设置和resize学习时记录的一点东西,希望对新手朋友有用。rn rn一、不为设置宽高属(此时浏览器显示的文本框宽高属性为其默认值)rnrnrnrn rn1、谷歌、360浏览器rn在chrome和360chrome浏览器中,不设置浏览器会选择其自身默认的文本框大小显示内容,在没有设置属性的条件下,只能把文本区域在默认大小基础上利用鼠标拖动使显示区域变大
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 数据库课程属性 数据库课程属性