textarea 在浏览器中固定大小和禁止拖动的实现方法


Posted in Javascript onDecember 03, 2016

HTML 标签 textarea 在大部分浏览器中只要指定行(rows)和列(cols)属性,就可以规定 textarea的尺寸,大小就不会改变,不过更好的办法是使用 CSS 的 height 和 width属性,但是Chrome,Safari和FireFox渲染的效果不同,可以拖动右下角图标改变大小。但是过分拖动大小会影响页面布局,使页面变得不美观。

可以通过添加如下两个样式禁用拖动,固定大小:

1:彻底禁用拖动(推荐)

resize: none;

2:只是固定大小,右下角的拖动图标仍在

width: 200px; 

height: 100px; 

max-width: 200px; 

max-height: 100px;

3:浏览器信息:

Mozilla/5.0 (Windows NT 5.1) AppleWebKit/535.1 (KHTML, like Gecko)Chrome/13.0.782.218 Safari/535.1

以上这篇textarea 在浏览器中固定大小和禁止拖动的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 实现浏览历史记录示例
Apr 20 Javascript
通过Jquery的Ajax方法读取将table转换为Json
May 31 Javascript
Jquery使用val方法读写value值
May 18 Javascript
jQuery+HTML5实现图片上传前预览效果
Aug 20 Javascript
实例讲解javascript注册事件处理函数
Jan 09 Javascript
微信小程序  audio音频播放详解及实例
Nov 02 Javascript
AngularJS中的缓存使用
Jan 11 Javascript
详解vue-router 初始化时做了什么
Jun 11 Javascript
react-navigation之动态修改title的内容
Sep 26 Javascript
Webstorm2016使用技巧(SVN插件使用)
Oct 29 Javascript
从vue源码看props的用法
Jan 09 Javascript
vue实现全屏滚动效果(非fullpage.js)
Mar 07 Javascript
浅谈jQuery hover(over, out)事件函数
Dec 03 #Javascript
jquery 多个radio的click事件实例
Dec 03 #Javascript
jquery点击展示与隐藏更多内容
Dec 03 #Javascript
Javascript 实现放大镜效果实例详解
Dec 03 #Javascript
bootstrap模态框垂直居中效果
Dec 03 #Javascript
JS制作类似选项卡切换的年历
Dec 03 #Javascript
JS键盘版计算器的制作方法
Dec 03 #Javascript
You might like
360通用php防护代码(使用操作详解)
2013/06/18 PHP
将FCKeditor导入PHP+SMARTY的实现方法
2015/01/15 PHP
PHP单例模式模拟Java Bean实现方法示例
2018/12/07 PHP
给网站上的广告“加速”显示的方法
2007/04/08 Javascript
JavaScript中__proto__与prototype的关系深入理解
2012/12/04 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
2013/05/06 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
2013/06/05 Javascript
javascript避免数字计算精度误差的方法详解
2014/03/05 Javascript
一个JavaScript去除字符串末尾的空白实例代码
2014/09/22 Javascript
node.js中的fs.fstatSync方法使用说明
2014/12/15 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
2015/06/05 Javascript
thinkphp实现无限分类(使用递归)
2015/12/19 Javascript
javascript函数命名的三种方式及区别介绍
2016/03/22 Javascript
微信小程序开发一键登录 获取session_key和openid实例
2016/11/23 Javascript
值得分享和收藏的xmlplus组件学习教程
2017/05/05 Javascript
修改vue源码实现动态路由缓存的方法
2020/01/21 Javascript
JavaScript实现随机点名器
2020/03/25 Javascript
vue脚手架项目创建步骤详解
2021/03/02 Vue.js
[02:36]DOTA2英雄基础教程 斯拉克
2013/11/29 DOTA
[00:32]DOTA2上海特级锦标赛 Ehome战队宣传片
2016/03/03 DOTA
在python中实现同行输入/接收多个数据的示例
2019/07/20 Python
python使用yield压平嵌套字典的超简单方法
2019/11/02 Python
Python 操作SQLite数据库的示例
2020/10/16 Python
优质有机椰子产品:Dr. Goerg
2019/09/24 全球购物
英国办公家具网站:Furniture At Work
2019/10/07 全球购物
模具专业推荐信
2013/10/30 职场文书
给老婆大人的检讨书
2014/02/24 职场文书
新手上路标语
2014/06/20 职场文书
乡镇个人对照检查材料
2014/08/22 职场文书
销售人员工作自我评价
2014/09/21 职场文书
领导干部“四风”问题批评与自我批评材料
2014/09/24 职场文书
2014幼儿园大班工作总结
2014/11/10 职场文书
2014年社区工作总结
2014/11/18 职场文书
《鸡兔同笼》教学反思
2016/02/19 职场文书
Java面试题冲刺第十六天--消息队列
2021/08/07 面试题
Python中使用Opencv开发停车位计数器功能
2022/04/04 Python