HTML文本域禁止手动拖动：使用CSS resize属性固定textarea大小

如何禁止HTML文本域手动拖动调整大小

在网页开发中，textarea元素默认允许用户通过拖拽右下角来调整尺寸。但在某些布局中，固定文本域大小能提升界面一致性。通过CSS的resize属性即可轻松实现。

实现步骤

1. 定位到目标textarea元素，可为其添加类名或ID以便精确控制。
2. 在CSS中设置resize: none;，这会禁用拖拽调整功能。

完整示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        textarea {
            resize: none; /* 禁止用户手动拖动调整大小 */
        }
    </style>
</head>
<body>
    <textarea name="" cols="30" rows="10">这里是文本域内容</textarea>
</body>
</html>

上述代码中，resize: none;是关键样式，它阻止了所有方向的尺寸调整。

兼容性与注意事项

resize属性属于CSS3规范，现代浏览器（如Chrome、Firefox、Safari、Edge）均支持。但部分旧版浏览器可能无法识别，此时可考虑以下降级方案：

• 使用JavaScript监听mousedown事件并阻止默认行为，但实现较复杂。
• 为textarea设置固定宽度和高度，并配合overflow: auto，但用户仍可能通过其他方式调整。

建议在实际项目中，根据目标用户浏览器环境进行充分测试，确保功能符合预期。