在 FF safari 等浏览器下textarea可以通过鼠标拖动改变大小 有时候很纠结，有木有。。

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

#safari #浏览器 #css

本文介绍如何在FFsafari浏览器中禁用textarea的大小调整功能，避免因用户误操作导致布局问题或用户体验下降。通过设置CSS属性resize为none来实现这一目的。
 

在FF safari 中textarea可以通过鼠标拖动改变大小，就像这样子：

这种如果用户去拉的话，不小心拉得太大了。有可能会出现布局问题或者用户自己无法缩小，或者用户根本不想要有这样的功能，这样就有必要把这样可以改变大小的功能给禁用掉。

作法：设置textares css 属性 

textarea{resize:none;}


即可

 

精选资源
textarea 在浏览器中固定大小和禁止拖动的实现方法
01-19
textarea 在大部分浏览器中只要指定行（rows）和列（cols）属性，就可以规定 textarea的尺寸，大小就不会改变，不过更好的办法是使用 CSS 的 height 和 width属性,但是Chrome,Safari和FireFox渲染的效果不同，可以...
textarea标签大小不可变不能通过鼠标拖动的方式来拖动
09-28
"`可以有效地固定`<textarea>`的大小，防止用户通过鼠标拖动改变其尺寸。这一特性在保持页面布局一致性及实现特定设计意图时十分有用，但开发者需注意这种做法可能对用户体验产生的影响，确保最终的设计决策符合用户...
点击文本框后页面变大
weixin_39037804的博客
09-17 968
原因：HTML中默认是认为16px的字体，人才能看清楚，所以，当点击文本框的时候，当前文本框会以字体16px的大小显示（即字体小于16px页面会变大）。 解决原理：设置文本框的的字体为16px； 解决...
关于textarea在safari chrome下可拖动大小的问题
逆退相干
01-30 161
textarea在chrome和safari浏览器下可以拖动大小,有时候我们希望大小能固定 解决方法: resize: none; 或者: max-width:300px; max-height:300px; width:300px; height:300px; 参考地址: http://drupal.org/node/16...
textarea拖拽控制
香蕉猪的专栏
08-11 4171
一、用处 textarea默认时允许用户以拖拽形式来改变textarea大小，但textarea的大小变化会撑大其父节点，有时会破坏整体布局，有时我们并不希望textarea随意拖拽。   二、原因 通过调用 window.getComputedStyle(textarea元素, null).resize 返回both，我们可以知道原来是resize样式属性默认为both(
textarea在ie浏览器如何支持自由拉伸_Mozilla为浏览器发布WebXR模拟器扩展程序，帮助创建WebXR内容...
weixin_39902107的博客
01-17 210
来源：映维网 作者 黄颜 由于多个原因，开发和调试WebXR体验相当困难，如你必须拥有一款XR设备；特定平台缺乏对XR设备的支持（如macOS）；经常需要戴上和摘下头显不是什么舒适的过程；为了令他应用程序支持各种形状参数，你必须拥有一系列的设备：移动头显，系留设备，三自由度，六自由度… 所以，Mozilla日前正式发布了一个用于帮助创建WebXR内容的WebXR模拟器浏览器扩展。对于这个扩展，Mo...
textarea 文本框禁止拖动改变大小
热门推荐
xinxin的博客
06-14 2万+
火狐／chrome  /safari   textarea文本框可以拖动改变大小。    只要给textarea添加一个css属性就可以禁止此功能，具体代码如下： textarea{ resize:none; }
JS控制TextArea自适应高度，适用于IE、Chrome、Safari等浏览器
11-19
这种主要在手机端应用较为广泛，当前PC也是可以用的了。 使用简单，也可以通过JS触发事件调整大小
textarea 禁止拉动拖动改变大小
Ruby爱好者
04-08 1286
      标签 textarea 在大部分浏览器中只要指定行（rows）和列（cols）属性，就可以规定 textarea 的尺寸，大小就不会改变，不过更好的办法是使用 CSS 的 height 和 width 属性。       但是Chrome,Safari和FireFox渲染的效果不同，可以拖动右下角图标改变大小。但是过分拖动大小会影响页面布局，使页面变得不美 观。可以通过添加如下两个...
CSS - 控制 textarea 是否可调整大小
qq_29761395的博客
10-06 2191
文章目录示例参考 In most browsers, <textarea>s are resizable — you’ll notice the drag handle in the right hand corner, which can be used to alter the size of the element on the page. This is controlled by the resize CSS property — resizing is enabled by defa
textarea 在 Chrome Safari FireFox 浏览器中禁用拖动和固定大小
weixin_30639719的博客
03-16 378
HTML 标签 textarea 在大部分浏览器中只要指定行（rows）和列（cols）属性，就可以规定 textarea 的尺寸，大小就不会改变，不过更好的办法是使用 CSS 的 height 和 width 属性,但是Chrome,Safari和FireFox渲染的效果不同，可以拖动右下角图标改变大小。但是过分拖动大小会影响页面布局，使页面变得不美观。可以通过添加如下两个样式禁用拖动，固定大小...
HTML中输入无限文字的文本框，可以随鼠标拖动大小
钱多多
07-30 9439
文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。 可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。 注释：在文本输入区内的文本行间，用 "%OD%OA" （回车/换行）进行分隔。 最常用的属性是cols和rows，用来规定textarea的尺寸。另
文本域默认会放大缩小，如何把文本域设置为禁止推拽状态，从而固定大小呢
dong_dong222的博客
12-08 4319
如下图，textarea标签默认在火狐、谷歌等浏览器下是可以进行右下角拖拽的，也就是当鼠标放上右下角点击之后文本域大小会随鼠标的移动放大或者缩小。但是在实际开发中并不需要这个功能，所以如何能够取消这个默认功能呢？ 方法一：设置最大宽度、最小宽度、最大高度、最小高度、将宽高锁死，但是这种方法比较麻烦。 方法二：给文本域设置属性resize：none 是工作中最常用的方法，该属性能直接固定文本域的大小，但是css3中的方法，部分浏览器可能会有兼容问题。 如果有帮助点个支持以下哦，以后会继...
html textarea设置不准拖动大小 、设置滚动条
信徒博客
04-21 4675
html 中<textarea></textarea>是一个多行文本框的，默认是可以拖动的，如何设置禁止拖动 html代码 <textarea style="overflow-y:scroll" class="showtext"> </textarea> 禁止拖动 .showtext{ width: 100%; heig...
如何让textarea不可拖拽变化大小
weixin_33733810的博客
07-24 585
2019独角兽企业重金招聘Python工程师标准>>> ...
浅谈Css盒模型在FF和IE中的区别
07-21 2015
盒子模型其实有两个：一个是标准的盒子模型，即是firefox支持的；一个是IE盒子模型，即是IE支持的。标准盒子模型的宽和高包括padding和border，如图1IE盒子模型的宽和高是不包括padding和border的，如图2解决问题办法：首先谈谈!important问题的引
实现兼容各浏览器的textArea滚动条样式
在本例中，提到的“压缩包子文件的文件名称列表”暗示我们需要关注在构建过程中，如何将自定义滚动条的JavaScript逻辑和CSS样式正确地打包到一个或多个包文件中，以确保在不同浏览器环境下的兼容性和性能。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值