上一篇
html 如何输入多行文本
HTML 中，可以使用 “ 标签来输入
HTML 中，有多种方法可以实现输入多行文本的功能，以下为您详细介绍：
使用 <textarea> 基本语法
<textarea> 标签是专门用于创建多行文本输入框的元素，其基本语法如下：
<textarea name="textfield" rows="5" cols="30"></textarea>
name 属性：用于标识该文本域，在表单提交时，服务器端可以通过该名称获取用户输入的值。rows 属性：设置文本域的行数，即显示的高度，数值越大，可见的行数越多。cols 属性：设置文本域的列数，即显示的宽度，决定了每行可显示的字符数。- 标签内的文本内容为初始值,当页面加载时，该内容会显示在文本域中，用户可对其进行编辑修改。
示例
以下是一个简单的包含多行文本输入框的表单示例：
<!DOCTYPE html>
<html>
<head>多行文本输入示例</title>
</head>
<body>
<form action="/submit" method="post">
<label for="comment">留言：</label><br>
<textarea id="comment" name="comment" rows="10" cols="50">请在此输入您的留言</textarea><br>
<input type="submit" value="提交">
</form>
</body>
</html> 在这个例子中,创建了一个名为“comment”的多行文本输入框，初始行数为 10 行，列数为 50 列，并设置了初始提示文本“请在此输入您的留言”，当用户填写完留言后，点击提交按钮，表单数据将通过 POST 方法提交到“/submit”地址进行处理。
样式控制
可以通过 CSS 对 <textarea> 进行样式控制，例如改变其宽度、高度、字体、边框等样式，使其更符合页面的整体设计风格。
<style>
textarea {
width: 300px;
height: 150px;
font-family: Arial, sans-serif;
font-size: 14px;
border: 1px solid #ccc;
padding: 10px;
}
</style> 将上述 CSS 代码添加到 <head> 部分，即可对页面中的 <textarea> 元素应用相应的样式。
使用 JavaScript 实现多行文本输入（结合其他元素）
虽然 <textarea> 是最直接的多行文本输入方式，但有时我们也可以结合 JavaScript 和其他 HTML 元素来实现类似的功能。
示例：利用 <div> 和 contenteditable 属性
<!DOCTYPE html>
<html>
<head>可编辑区域示例</title>
<style>
#editableDiv {
width: 300px;
height: 150px;
border: 1px solid #ccc;
padding: 10px;
overflow: auto;
}
</style>
</head>
<body>
<div id="editableDiv" contenteditable="true">这里可以输入多行文本</div>
<button onclick="getText()">获取文本</button>
<script>
function getText() {
var text = document.getElementById("editableDiv").innerText;
alert("输入的文本内容为：" + text);
}
</script>
</body>
</html> 在这个例子中,使用了一个 <div> 元素，并通过设置 contenteditable="true" 属性使其变为可编辑状态，用户可以在该区域内输入多行文本，就像在 <textarea> 中一样，通过 JavaScript 定义了一个 getText 函数，当点击“获取文本”按钮时，会获取该 <div> 内的文本内容，并通过 alert 弹窗显示出来。
FAQs
问题 1：<textarea> 和 <input type="text"> 有什么区别？
答：<textarea> 用于输入多行文本，它可以显示多个行，并且允许用户在其中输入较长的文本内容，适合用于留言、评论、详细描述等场景，而 <input type="text"> 只能输入单行文本，当文本超过其设定的宽度时，会自动水平滚动，通常用于输入较短的文本信息，如姓名、关键词等。
问题 2：如何限制 <textarea> 的输入长度？
答：可以通过 JavaScript 来实现对 <textarea> 输入长度的限制，在 <textarea> 的 oninput 事件中编写代码，实时监测用户输入的内容长度，当超过设定的长度时，截断多余的字符或者给出提示，以下是一个简单的示例：
<textarea id="limitedTextarea" oninput="limitText()" maxlength="100"></textarea>
<span id="charCount">0</span>/100
<script>
function limitText() {
var textarea = document.getElementById("limitedTextarea");
var charCount = document.getElementById("charCount");
if (textarea.value.length > 100) {
textarea.value = textarea.value.substring(0, 100);
}
charCount.innerText = textarea.value.length;
}
</script> 在这个例子中,<textarea> 的 maxlength 属性设置为 100，表示最多可输入 100 个字符。
基本语法
<textarea> 标签是专门用于创建多行文本输入框的元素，其基本语法如下：
<textarea name="textfield" rows="5" cols="30"></textarea>
name属性：用于标识该文本域，在表单提交时，服务器端可以通过该名称获取用户输入的值。rows属性：设置文本域的行数，即显示的高度，数值越大，可见的行数越多。cols属性：设置文本域的列数，即显示的宽度，决定了每行可显示的字符数。- 标签内的文本内容为初始值,当页面加载时，该内容会显示在文本域中，用户可对其进行编辑修改。
示例
以下是一个简单的包含多行文本输入框的表单示例：
<!DOCTYPE html>
<html>
<head>多行文本输入示例</title>
</head>
<body>
<form action="/submit" method="post">
<label for="comment">留言：</label><br>
<textarea id="comment" name="comment" rows="10" cols="50">请在此输入您的留言</textarea><br>
<input type="submit" value="提交">
</form>
</body>
</html> 在这个例子中,创建了一个名为“comment”的多行文本输入框，初始行数为 10 行，列数为 50 列，并设置了初始提示文本“请在此输入您的留言”，当用户填写完留言后，点击提交按钮，表单数据将通过 POST 方法提交到“/submit”地址进行处理。
样式控制
可以通过 CSS 对 <textarea> 进行样式控制，例如改变其宽度、高度、字体、边框等样式，使其更符合页面的整体设计风格。
<style>
textarea {
width: 300px;
height: 150px;
font-family: Arial, sans-serif;
font-size: 14px;
border: 1px solid #ccc;
padding: 10px;
}
</style> 将上述 CSS 代码添加到 <head> 部分，即可对页面中的 <textarea> 元素应用相应的样式。
使用 JavaScript 实现多行文本输入（结合其他元素）
虽然 <textarea> 是最直接的多行文本输入方式，但有时我们也可以结合 JavaScript 和其他 HTML 元素来实现类似的功能。
示例：利用 <div> 和 contenteditable 属性
<!DOCTYPE html>
<html>
<head>可编辑区域示例</title>
<style>
#editableDiv {
width: 300px;
height: 150px;
border: 1px solid #ccc;
padding: 10px;
overflow: auto;
}
</style>
</head>
<body>
<div id="editableDiv" contenteditable="true">这里可以输入多行文本</div>
<button onclick="getText()">获取文本</button>
<script>
function getText() {
var text = document.getElementById("editableDiv").innerText;
alert("输入的文本内容为：" + text);
}
</script>
</body>
</html> 在这个例子中,使用了一个 <div> 元素，并通过设置 contenteditable="true" 属性使其变为可编辑状态，用户可以在该区域内输入多行文本，就像在 <textarea> 中一样，通过 JavaScript 定义了一个 getText 函数，当点击“获取文本”按钮时，会获取该 <div> 内的文本内容，并通过 alert 弹窗显示出来。
FAQs
问题 1：<textarea> 和 <input type="text"> 有什么区别？
答：<textarea> 用于输入多行文本，它可以显示多个行，并且允许用户在其中输入较长的文本内容，适合用于留言、评论、详细描述等场景，而 <input type="text"> 只能输入单行文本，当文本超过其设定的宽度时，会自动水平滚动，通常用于输入较短的文本信息，如姓名、关键词等。
问题 2：如何限制 <textarea> 的输入长度？
答：可以通过 JavaScript 来实现对 <textarea> 输入长度的限制，在 <textarea> 的 oninput 事件中编写代码，实时监测用户输入的内容长度，当超过设定的长度时，截断多余的字符或者给出提示，以下是一个简单的示例：
<textarea id="limitedTextarea" oninput="limitText()" maxlength="100"></textarea>
<span id="charCount">0</span>/100
<script>
function limitText() {
var textarea = document.getElementById("limitedTextarea");
var charCount = document.getElementById("charCount");
if (textarea.value.length > 100) {
textarea.value = textarea.value.substring(0, 100);
}
charCount.innerText = textarea.value.length;
}
</script> 在这个例子中,<textarea> 的 maxlength 属性设置为 100，表示最多可输入 100 个字符。
