使用多行文本Textarea大小设置与resize属性结合使用
来源:互联网 发布:ubuntu steam os 编辑:程序博客网 时间:2024/06/05 18:06
在此文中,我将和大家分享一下多行文本区域大小的设置和resize学习时记录的一点东西,希望对新手朋友有用。
一、不为<textarea>设置宽高属(此时浏览器显示的文本框宽高属性为其默认值)
1、谷歌、360浏览器
在chrome和360chrome浏览器中,不设置<textarea>浏览器会选择其自身默认的文本框大小显示内容,在没有设置<resize>属性的条件下,只能把文本区域在默认大小基础上利用鼠标拖动使显示区域变大,而不能变更小了。(如图示,红圈中的斜线就表示可以拖动改变大小,下图分别是谷歌和360浏览器的效果截图)
2、IE浏览器
在IE浏览器中,如图所示。红圈处没有斜条状的阴影,根据之前两个浏览器的试验推知,IE浏览器中的多行文本框区域大小是不能通过拖动鼠标改变的。
3、Firefox 火狐浏览器
在Firefox中则有了另外的效果,如图所示,红圈阴影提示我们这个多行文本框区域大小是可变的,并且在Firefox这了不再像之前谷歌等一样只能往大的方向变化,更加不像IE一样那么死板固执,Firefox更加灵活地提供给了我们变大和变小的功能。
二、为<textarea>设置宽高属性rows、cols值,在此rows=“10”、cols=“30”以及有无添加resize属性
1、谷歌、360浏览器
在谷歌、360浏览器中,设置了宽高属性、在没有设置<resize:none>属性的条件下,依然只能把文本区域在默认大小基础上利用鼠标拖动使显示区域变大,而不能变更小,但是文本区域最小尺寸只能是我们设置的大小,不能再变小了。如下图,前者没有使用resize:none属性对多行文本框区域进行限制,因此用户可以改变元素大小;后者使用了resize:none属性对多行文本框区域进行限制,因此用户不能再改变元素大小。
设置宽高,但未加resize:none限制设置宽高,但加了resize:none限制。
设置宽高,但未加resize:none限制设置宽高,但加了resize:none限制
2、IE浏览器
IE浏览器中,不管有没有resize:none都无法改变元素大小,目前看来似乎是不支持resize属性的,或者说不支持用户改变元素(包括div等)大小的。在此就不截图赘述了。
3、Firefox
在我使用的Firefox10.0中是支持resize属性的,根据http://www.w3school.com.cn/所述,Firefox4+不支持resize属性,有兴趣的朋友可以去看看。因在加入resize:none之后和谷歌浏览器是一样的效果,在此不赘述。
三、总结
综上所述,我们可以知道对于我们前端人来说,要想把网页布局做好,这些小细节不可忽略,也不可小视。这样我们才能让自己的开发效率提高,诸君与鄙人共勉,有不妥之处还请不吝赐教。
Tips:
新手们千万注意,如果有的编辑器不能联想输入,在我们设置宽高属性值时需要注意一点,就是当值大于1时,row/col后面的s千万不能丢失,不然可能就会出现不管怎么改变值得大小,显示出的面积都是默认的大小,我就是遇到了这样的问题,才决定把这个经历记录下来,以后回头看看自己的成长之路的。
Nino Yeves
- 使用多行文本Textarea大小设置与resize属性结合使用
- HTML+CSS基础 form-textarea创建带有水平垂直滚动条的多行文本框并设置其大小
- <textarea>文本域,多行文本输入
- 使用DrawTextEx绘制多行文本
- android TextView多行文本(超过3行)使用ellipsize属性无效
- android TextView多行文本(超过3行)使用ellipsize属性无效问题的解决方法
- textarea标签中resize缩放属性的设置
- textarea标签中resize缩放属性的设置
- textarea标签中resize缩放属性的设置
- 【CSS】textarea标签中resize属性的设置
- Ext_多行文本输入框_Ext.form.TextArea
- 限制多行文本框textarea输入字数的方法
- textarea多行文本域中的换行的小陷阱
- bootstrap 多行文本框textarea 怎么提交form
- bootstrap 多行文本框textarea 怎么提交form
- 表单元素之button元素、textarea多行文本元素
- jquery 插件实现多行文本框[textarea]自动高度
- android TextView多行文本(超过3行)使用ellipsize="end"属性无效问题的解决方法
- 如何给一个实际物理地址对应的内存空间赋值?
- 使用SSH时there is no action mapped for namespace[/]错误的解决方案
- 2016年12月4日学习总结----阶段总结
- 代码整洁之道读书笔记(八)
- cp 命令
- 使用多行文本Textarea大小设置与resize属性结合使用
- 串匹配 KMP
- QuickHit项目源代码及小总结
- Redis基础学习--持久化(数据备份与恢复)、复制、安全、通信协议、管理工具
- Webstorm涉及的基本一些操作
- 字符串hash
- CSS中的背景颜色和图片
- 通讯录
- ThinkPHP3.2.3验证码显示、刷新、校验