【转载】chrome 不允许 textarea 可更改大小

最新推荐文章于 2019-09-24 12:00:00 发布
原创 最新推荐文章于 2019-09-24 12:00:00 发布 · 277 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Chrome #浏览器 #.net

本文介绍了一种简单的方法来禁用Chrome浏览器中textarea编辑框的大小调整功能。通过使用CSS样式`resize:none;`可以有效地取消浏览器默认的调整大小选项。

使用 chrome 浏览器的时候，如果页面有 textarea 编辑框，chrome 默认是允许更改编辑框大小的，此方法可取消这个特性

 

textarea {
	    resize: none;
}
 

 

来源地址：http://www.oschina.net/code/snippet_12_3386

textarea 自适应大小 兼容Chrome ie等浏览器
04-08
textarea 自适应大小 兼容Chrome ie等浏览器，自动调整大小
textarea标签大小不可变不能通过鼠标拖动的方式来拖动
09-28
然而，如果需要固定`<textarea>`的大小，不允许用户调整，可以通过CSS样式来实现。在描述中提到的方法是`style="resize:none;"`，这个样式属性可以应用在`<textarea>`标签上，用来禁止用户通过鼠标操作来改变其尺寸...
【Css】textarea在Chrome、FireFox中固定大小
PIGer920的专栏
10-28 1941
/**  * Author:RDP  * My mail:abel1314520@gmail.com  * My blog:  http://blog.teamhaka.com  */ textarea在Chrome、和一些版本的FireFox中，会在右下角出现一个拖动的标志。 如图： 拖动textarea会改变其尺寸，进而会影响页面布局，使页面变得凌乱不堪。 要使
解决chrome下textarea控件滚动条不好使情况
Inuyasha1121的专栏
10-15 2687
chrome 默认是允许更改编辑框大小的，可取消这个特性
chrome/FF/safari浏览器下input和textarea的默认样式outline和resize
weixin_33881050的博客
05-03 424
outline：input和textarea的默认焦点样式 语法：outline：[outline-color] || [outline-style] || [outline-width] || [outline-offset] | inherit 相关属性：outline-style , outline-width , outline-offset , outline-color ...
动态调整textarea中字体的大小代码
10-29
动态调整textarea中字体大小的代码知识点可以从以下几个方面进行阐述： 1. HTML结构设计：为了实现字体大小的动态调整，首先需要准备两个基础的HTML元素——和<textarea>。代码中使用了一个元素来创建一个下拉列表...
让textarea自动调整大小的js代码
10-28
然而，默认情况下，`textarea`的大小是固定的，不随用户输入的内容自动调整。为了提供更好的用户体验，可以使用JavaScript来实现`textarea`的自动调整大小功能。本文将详细解释如何使用JavaScript代码实现这一功能，...
textarea标签中resize缩放属性的设置
热门推荐
xinxintai的专栏
12-21 3万+
点击打开链接 CSS3中新增了resize缩放属性，这个属性可以应用到任意元素。目前只有Webkit内核的浏览器才支持这个css3属性，即Google chrome和Apple safari都支持。 而textarea标签中，Webkit内核的浏览器会默认resize的值为both，即用户可以调节元素的宽度和高度。如下图就是在Google chrome中我博客的textarea
chrome textarea 问题
ShrV的专栏
11-26 573
点击input时,textarea的count值每次加1.可是手动改变textarea的值时,再点击input按钮.则页面不再变化.而通过开发者工具,则可以看到值的变化. New Document <!-- window.onload = function(){ var text = document.getElementById("text"
禁用webkit textarea可调整大小和文本框焦点时边框 , contenteditable 和designMode
sohighthesky的专栏
06-20 5929
大家都知道，Webkit系列浏览器（Safari、Chrome）的textarea的默认效果和其它浏览器不一样，比如，textarea可拖动调整大小，聚焦（onfocus）时边框变成黄色。这些效果的确很酷，但我们有时候不需要这些效果，那怎么办呢？其实用CSS轻松取消这些效果。 1. 取消拖动调整大小 textarea { resize: none; }2. 聚焦时边框颜色不变 textarea:focus { outline: none; } http://luolon
JS-chrome中textarea禁止回车换行、获取和设置光标位置
全栈攻城狮？
07-30 3545
最近公司项目中要求制作在线聊天服务，其中输入框的需求： 1.单按回车发送消息 2.ctrl/command+回车换行 但是textarea本身带有的功能和需求相反，所以只有对js事件进行处理 1.禁止textarea单按回车时换行 项目是用vue编写，所以无需对event的keyCode判断是否按了ctrl或meta，模板如下： <textarea v-model=...
文本域textarea 在不同浏览器大小不同问题
白鱼的博客
12-19 1635
textarea 一般由行列来指定大小， 例如 <textarea rows="10" cols="10"></textarea> 就是一个10行10列的文本域，但不同的浏览器对于一行一列的大小有不同的规定，所以这个文本域可能会呈现不同的效果，影响界面美观。解决方法：使用width 和 height 来指定其大小，即可保证效果一致，例如：<textarea style="width:100px
textarea在Firefox和Chrome的赋值问题（已解决）
weixin_30567471的博客
11-06 258
<textarea id="textarea"></textarea> $("#textarea").append("ppppp"); $("#textarea").text("ppppp"); $("#textarea").html("ppppp"); 问题描述： 当我手动在textarea中输入或删除字符后，再执行上面的方法，IE正常赋值，但在Firefox和...
JQuery TextArea的取值与赋值问题
止境
01-21 6239
首先，说明这不是一个简单的问题！ 先说取值： $("#textarea").text();//读取最近测试时候发现在firefox或Chrome中读取不出textArea的值，IE正常。 于是修改为： $("#textarea").val();问题解决，不过搜索时，发现有人提另一个问题： 当在一个textarea标签中键入一个回车时，实际上会插入2个符号：\n\r \
禁止 textarea 调整大小（缩放）
weixin_44022064的博客
09-24 3992
对 textarea 应用样式 style=”resize:none;” 即可。
textarea的高度自适应
樊小书生
03-16 1万+
textarea是一个文本框，谷歌、IE、Opera默认显示两行文本，火狐默认显示3行文本，行数超过两行是会出现滚动条，可以自己设定设定一些行数来进行强制多少行进行显示。
textarea 不可更改
最新发布
09-12
<think> 我们被要求让textarea不可更改，根据引用内容，有几种方法可以实现： 1. 使用readonly属性：使文本区域只读，用户不能编辑内容，但可以选中和复制文本，同时保留滚动条。 2. 使用disabled属性：使文本区域禁用，内容变成灰色，且不可滚动（如果内容多，滚动条会消失）。 3. 使用CSS的resize属性禁止调整大小：但注意这并不禁止编辑内容，只是禁止调整文本框的尺寸。 根据引用[2]，我们可以通过设置`resize: none;`来禁止调整大小，但这不是禁止编辑。禁止编辑需要设置readonly或disabled属性。 另外，引用[4]详细说明了disabled和readonly的区别： - disabled：文本框变灰，不可编辑，且不能滚动（滚动条消失）。 - readonly：文本框外观不变，不可编辑，但可以滚动查看内容。 因此，如果希望textarea不可更改（即不可编辑），并且希望保留滚动条以便查看长文本，应该使用readonly属性。 实现方法： 1. HTML方式： ```html <textarea readonly>这里是内容</textarea> ``` 2. JavaScript方式（动态设置）： ```javascript document.getElementById("myTextarea").readOnly = true; // 或者使用jQuery $("textarea").prop('readonly', true); ``` 3. 如果同时需要禁止调整大小（根据引用[2]）： ```css textarea { resize: none; } ``` 或者针对特定ID： ```javascript document.getElementById("note1").style.resize = 'none'; ``` 注意：如果使用disabled，虽然也可以禁止编辑，但会改变外观和交互（如不能滚动），所以根据需求选择。 总结步骤： - 若要禁止编辑，使用readonly属性（推荐）或disabled属性（根据是否要保留滚动条和正常外观）。 - 若要禁止调整大小，使用CSS的resize: none。 因此，根据用户需求“不可更改”（即不可编辑），我们主要使用readonly属性。 生成相关问题： 1. 如何同时禁用textarea的编辑和调整大小？ 2. textarea的readonly和disabled属性有什么区别？ 3. 如何通过CSS样式使textarea不可调整大小？ </think> 要让 `<textarea>` 元素不可更改（即内容不可编辑），主要有以下几种实现方法，每种方法有不同特点： ### 一、推荐方法：使用 `readonly` 属性 ```html <textarea readonly>这是不可编辑的内容</textarea> ``` **特点**： 1. 内容纯文本显示，**无法修改** 2. 保留正常外观（不变灰） 3. 支持滚动条查看长文本[^4] 4. 可通过脚本获取内容 ```javascript // JavaScript 动态设置 document.querySelector('textarea').readOnly = true; ``` ### 二、替代方法：使用 `disabled` 属性 ```html <textarea disabled>不可编辑的灰色文本</textarea> ``` **特点**： 1. 内容**完全锁定不可修改** 2. 文本显示为灰色禁用状态 3. **滚动条消失**（长文本无法查看）[^4] 4. 表单提交时不会包含该字段值 ```javascript // jQuery 设置方式 $("textarea").prop('disabled', true); ``` ### 三、禁止调整大小（可选） 若需同时固定文本框尺寸： ```css textarea { resize: none; /* 禁止拖拽调整大小 */ } ``` ```javascript // JS 动态禁用调整 document.getElementById("myTextarea").style.resize = 'none'; ``` ### 方法选择建议 | 场景 | 推荐方法 | |--------------------------|---------------| | 需查看长文本内容 | `readonly` | | 纯展示且不需滚动条 | `disabled` | | 需保留表单提交值 | `readonly` | | 需要视觉禁用反馈 | `disabled` | > 如果要完全阻止用户交互（点击、选择文本等），可叠加 CSS： > ```css > textarea[readonly] { > user-select: none; /* 禁止文本选择 */ > pointer-events: none; /* 屏蔽鼠标事件 */ > } > ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值