如何在文本区域上设置最小和最大行数

在文本区域（如<textarea>元素）上设置最小和最大行数可以通过CSS和JavaScript来实现。下面是一个完整的解决方案，包括HTML、CSS和JavaScript代码示例。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Textarea Min and Max Rows</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <form>
        <label for="textArea">Enter text:</label>
        <textarea id="textArea" rows="5"></textarea>
    </form>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

textarea {
    width: 300px;
    padding: 10px;
    margin: 10px 0;
    resize: vertical; /* Allow vertical resizing */
}

JavaScript (script.js)

document.addEventListener('DOMContentLoaded', function() {
    const textArea = document.getElementById('textArea');
    const minHeight = 5; // Minimum number of rows
    const maxHeight = 10; // Maximum number of rows

    textArea.addEventListener('input', function() {
        const lineHeight = parseInt(getComputedStyle(textArea).lineHeight);
        const newHeight = Math.min(Math.max(textArea.scrollHeight, minHeight * lineHeight), maxHeight * lineHeight);
        textArea.style.height = `${newHeight}px`;
    });
});

解释

HTML: 创建一个<textarea>元素，并为其设置一个ID以便在JavaScript中引用。
CSS: 设置<textarea>的样式，包括宽度、内边距和允许垂直调整大小。
JavaScript:
- 在文档加载完成后，获取<textarea>元素。
- 定义最小和最大行数（minHeight和maxHeight）。
- 添加一个input事件监听器，当用户输入文本时，计算并设置<textarea>的高度。
- 使用scrollHeight属性获取文本的实际高度，并根据最小和最大行数调整高度。