HTML文本域如何设置为禁止用户手动拖动

lichongyang

2 周前

要禁止用户手动拖动 HTML 文本域 (<textarea>) 的大小，可以通过 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>禁止拖动文本域</title>
    <style>
        textarea {
            resize: none; /* 禁止用户手动拖动调整大小 */
            width: 300px;
            height: 150px;
        }
    </style>
</head>
<body>
    <textarea placeholder="在这里输入文本..."></textarea>
</body>
</html>

解释：

resize: none; 这条 CSS 规则禁用了文本域的大小调整功能。用户无法通过拖动右下角的调整框来改变文本域的大小。
你还可以通过设置 width 和 height 来定义文本域的固定尺寸。

如果你希望允许用户调整大小，但限制其只能在某些方向上调整大小，可以使用 resize: vertical; 或 resize: horizontal;来分别禁用水平或垂直方向上的调整。