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

最新推荐文章于 2020-09-25 22:51:20 发布
原创 最新推荐文章于 2020-09-25 22:51:20 发布 · 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+ie8测试有效）
ch717828的专栏
02-16 1万+
最近有一个需求，需要让textarea宽度不变，但是高度随着用户的输入高度自适应。由于浏览器版本的不兼容，很多方法通常只能在一个浏览器中起作用。 下面我写了一个小的demo,可以在chrome 和 ie8下正常使用，其他浏览器没有测试过。 通过两个方式实现，分别是js 和纯css
textarea 自适应大小 兼容Chrome ie等浏览器
04-08
textarea 自适应大小 兼容Chrome ie等浏览器，自动调整大小
【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标签大小不可变不能通过鼠标拖动的方式来拖动
09-28
然而，如果需要固定`<textarea>`的大小，不允许用户调整，可以通过CSS样式来实现。在描述中提到的方法是`style="resize:none;"`，这个样式属性可以应用在`<textarea>`标签上，用来禁止用户通过鼠标操作来改变其尺寸...
动态调整textarea中字体的大小代码
10-29
动态调整textarea中字体大小的代码知识点可以从以下几个方面进行阐述： 1. HTML结构设计：为了实现字体大小的动态调整，首先需要准备两个基础的HTML元素——和<textarea>。代码中使用了一个元素来创建一个下拉列表...
让textarea自动调整大小的js代码
10-28
然而，默认情况下，`textarea`的大小是固定的，不随用户输入的内容自动调整。为了提供更好的用户体验，可以使用JavaScript来实现`textarea`的自动调整大小功能。本文将详细解释如何使用JavaScript代码实现这一功能，...
chrome textarea 问题
ShrV的专栏
11-26 573
点击input时,textarea的count值每次加1.可是手动改变textarea的值时,再点击input按钮.则页面不再变化.而通过开发者工具,则可以看到值的变化. New Document <!-- window.onload = function(){ var text = document.getElementById("text"
textarea标签中resize缩放属性的设置
热门推荐
xinxintai的专栏
12-21 3万+
点击打开链接 CSS3中新增了resize缩放属性，这个属性可以应用到任意元素。目前只有Webkit内核的浏览器才支持这个css3属性，即Google chrome和Apple safari都支持。 而textarea标签中，Webkit内核的浏览器会默认resize的值为both，即用户可以调节元素的宽度和高度。如下图就是在Google chrome中我博客的textarea
textarea的高度自适应
樊小书生
03-16 1万+
textarea是一个文本框，谷歌、IE、Opera默认显示两行文本，火狐默认显示3行文本，行数超过两行是会出现滚动条，可以自己设定设定一些行数来进行强制多少行进行显示。
禁用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
【jQuery】IE与Chrome的textarea取数处理
greatbody的专栏
03-10 1279
假设： IE $("#data").val("a\rb"); 正常换行   $("#data").val("a\nb"); 正常换行   $("#data").val("a\r\nb"); 正常换行   $("#data").val("a\n\rb"); 正常换行 Chrome $("#data").val("a\rb")
如何在Google Chrome浏览器中放大或缩小文本
culul01313的博客
09-25 2359
If you’re having trouble comfortably reading text that is either too small or too big on a website in Google Chrome, there’s a quick way to change text size without diving into Settings. Here’s how. ...
取消chrome浏览器下input和textarea的默认样式
wangxiaohui6687的专栏
06-09 952
最近一个细节引起了我的注意，chrome浏览器下的input和textarea在聚焦的时候都有一个黄色的边框，而且textarea还可以任意拖动放大，这是不能容忍的，影响美观不说，有时候拖动textarea还会使页面布局错乱，所以决定重置这些样式。这是大前端调整的样式，样式统一就是好看，o(∩_∩)o 哈哈···· 看代码： 取消chrome下input和textarea的聚焦
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; /* 屏蔽鼠标事件 */ > } > ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值