blocks|key|525448|text|这将会完成你的工作|type|unstyled|depth|inlineStyleRanges|entityRanges|data|525449|++textarea{
++++++++resize:none;
++++}|code-block|syntax|javascript|525450|​|525451|📷|atomic|offset|length|525452|525453|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/ab2b9c753eacb517e065ee33afb52c2d.png|imageAlt^0|0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Z|8|@]|9|@]|A|$]]|$1|I|3|J|5|K|7|10|8|@]|9|@$L|11|M|12|1|13]]|A|$]]|$1|N|3|H|5|6|7|14|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V|W|-4]]]]

<p>this will do your job    </p>

<pre><code>  textarea{
        resize:none;
    }
</code></pre>

<p><img src="https://i.stack.imgur.com/YNWcb.png" alt="enter image description here"></p>


blocks|key|525505|text|只需使用html+draggable属性即可轻松完成此操作|type|unstyled|depth|inlineStyleRanges|entityRanges|data|525506|<textarea+name="mytextarea"+draggable="false"></textarea>|code-block|syntax|javascript|525507|默认值为true。|525508|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>It can done easy by just using html draggable attribute</p>

<pre><code>&lt;textarea name="mytextarea" draggable="false"&gt;&lt;/textarea&gt;
</code></pre>

<p>Default value is true.</p>


blocks|key|525578|text|CSS3可以解决这个问题。不幸的是，现在只有60%25+of+used+browsers支持它。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|525579|对于IE和iOS，您不能关闭调整大小，但您可以通过设置其width和height来限制textarea维度。|style|CODE|525580|/*+One+can+also+turn+on/off+specific+axis.+Defaults+to+both+on.+*/
textarea+{+resize:vertical;+}+/*+none%7Chorizontal%7Cvertical%7Cboth+*/|code-block|syntax|javascript|525581|See+Demo|525582|entityMap|0|LINK|mutability|MUTABLE|url|http://caniuse.com/#search=resize|1|http://jsfiddle.net/doxk6Lnq/^0|M|K|0|0|S|5|Y|6|17|8|0|0|0|8|1|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|6|7|12|8|@$A|13|B|14|F|G]|$A|15|B|16|F|G]|$A|17|B|18|F|G]]|9|@]|C|$]]|$1|H|3|I|5|J|7|19|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|1A|8|@]|9|@$A|1B|B|1C|1|1D]]|C|$]]|$1|O|3|-4|5|6|7|1E|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]|W|$5|R|S|T|C|$U|X]]]]

<p>CSS3 can solve this problem. Unfortunately it's only supported on <a href="http://caniuse.com/#search=resize" rel="noreferrer">60% of used browsers</a> nowadays.</p>

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

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

<p><a href="http://jsfiddle.net/doxk6Lnq/" rel="noreferrer">See Demo</a></p>


blocks|key|525636|text|只有一个额外的选项，如果你想恢复应用程序中所有文本区域的默认行为，你可以在你的CSS中添加以下内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|525637|textarea:not([resize="true"])+{
++resize:+none+!important;
}|code-block|syntax|javascript|525638|并执行以下操作以启用要调整大小的位置：|525639|<textarea+resize="true"></textarea>|525640|请记住，此解决方案可能并不适用于您可能希望支持的所有浏览器。您可以在此处查看对resize的支持列表：http://caniuse.com/#feat=css-resize|offset|length|style|CODE|525641|entityMap|0|LINK|mutability|MUTABLE|url|http://caniuse.com/#feat=css-resize^0|0|0|0|0|13|6|1F|Z|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|12|8|@$M|13|N|14|O|P]]|9|@$M|15|N|16|1|17]]|A|$]]|$1|Q|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

<p>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:</p>

<pre><code>textarea:not([resize="true"]) {
  resize: none !important;
}
</code></pre>

<p>And do the following to enable where you want resizing:</p>

<pre><code>&lt;textarea resize="true"&gt;&lt;/textarea&gt;
</code></pre>

<p>Have in mind this solution might not work in all browsers you may want to support. You can check the list of support for <code>resize</code> here: <a href="http://caniuse.com/#feat=css-resize" rel="nofollow noreferrer">http://caniuse.com/#feat=css-resize</a></p>


blocks|key|525669|text|//CSS:
.textarea+{
++++resize:+none;
++++min-width:+//->+Integer+number+of+pixels
++++min-height:+//->+Integer+number+of+pixels
++++max-width:+//->+min-width
++++max-height:+//->+min-height
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|525670|上面的代码可以在大多数浏览器上运行|unstyled|525671|//HTML:
<textarea+id='textarea'+draggable='false'></textarea>|525672|要在最大数量的浏览器上运行，请同时执行这两项操作|525673|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$B|C]]|$1|I|3|J|5|F|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|F|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<pre><code>//CSS:
.textarea {
    resize: none;
    min-width: //-&gt; Integer number of pixels
    min-height: //-&gt; Integer number of pixels
    max-width: //-&gt; min-width
    max-height: //-&gt; min-height
}
</code></pre>

<p>above code works on most browsers</p>

<pre><code>//HTML:
&lt;textarea id='textarea' draggable='false'&gt;&lt;/textarea&gt;
</code></pre>

<p>do both for it to work on the maximum number of browsers</p>


blocks|key|308747|text|这个很适合我|type|unstyled|depth|inlineStyleRanges|entityRanges|data|308748|​|308749|<textarea
++type='text'
++style="resize:+none"
>
Some+text
</textarea>|code-block|syntax|javascript|308750|308751|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>This is works for me</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;textarea
  type='text'
  style="resize: none"
&gt;
Some text
&lt;/textarea&gt;</code></pre>
</div>
</div>
</p>


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

<pre><code>.textarea {
    clear:left;
    min-width: 267px;
    max-width: 267px;
    min-height:150px;
    max-height:150px;
}
</code></pre>

<p>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.</p>


Turn off textarea resizing

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在尝试关闭我的站点中的文本区域大小调整；现在我正在使用这个方法：.textarea {    clear:left;    min-width: 267px;    max-width: 267px;    min-height:150px;    max-height:150px;}我知道我的方法不正确，我正在寻...

问关闭文本区域大小调整
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问关闭文本区域大小调整EN