使用多行文本Textarea大小设置与resize属性结合使用

在此文中，我将和大家分享一下多行文本区域大小的设置和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