textarea禁止拉伸的方法

在前端web页面中，textarea输入框默认是可以通过鼠标拖动来改变其大小的，也就是可以拉伸它的大小。对了textarea可拉伸大小，对于网页的布局来说可能会有一些影响，下面的博文中73博客就说一说如何来禁止textarea拉伸的方法。

css resize属性

在css3中新增加了一个resize属性，此属性可以设置是否可以允许用户通过拖动的方式来自由缩放html元素的尺寸。

reszie：是否允许元素被拖动缩放。

语法：

resize: none|both|horizontal|vertical;

参数：

值	描述
none	用户无法调整元素的尺寸。
both	用户可调整元素的高度和宽度。
horizontal	用户可调整元素的宽度。
vertical	用户可调整元素的高度。

css禁止textarea拉伸的方法

禁止textarea拉伸可以通过CSS中的resize属性来设置。

例：

<style>
    /** https://www.73so.com */
    .m{
        width:150px;
        height: 100px;
        padding: 10px;
    }
    .no{
        resize:none;
    }
</style>
<textarea class="m">我是可以被拖动改变大小的</textarea>
<!-- 下面的输入况是不能被拖动改变大小的 --->
<textarea class="m no">我是不可以被改变大小的</textarea>

以上就是通过CSS中的resize属性来禁止textarea被拉伸的方法，当然除了上面的方法外还可以通过js代码来实现，这里不再多做介绍。