可通过maxlength属性限制输入字符数，结合JavaScript实现动态校验与提示，使用正则表达式过滤非法字符，并利用HTML5的pattern属性进行表单提交前的格式验证，从而全面控制文本输入框的内容长度与格式。
如果您在开发网页时需要对文本输入框的内容长度或格式进行控制，可以通过多种方式实现限制。以下是几种常用的方法来约束HTML中textarea或文本输入框的输入行为。
一、使用maxlength属性限制字符数量
通过设置maxlength属性，可以限制用户在textarea或input元素中输入的最大字符数。该方法简单有效，适用于大多数基础场景。
1、在HTML标签中添加maxlength="数值"属性。
2、将数值替换为允许输入的最大字符数量，例如50表示最多输入50个字符。
立即学习“前端免费学习笔记（深入）”；
3、示例代码：
<textarea maxlength="100"></textarea>，表示最多允许输入100个字符。
二、结合JavaScript动态校验输入内容
当需要更灵活地控制输入内容（如实时提示剩余字数或阻止非法输入），可使用JavaScript监听输入事件并执行检查逻辑。
1、为textarea元素绑定oninput事件，用于捕获每次输入变化。
2、在事件处理函数中获取当前输入值的长度，并与预设最大值比较。
3、若超过限制，则截断内容或弹出提示信息。
4、示例代码：
<textarea id="myText" oninput="checkLength()"></textarea>
对应脚本：
function checkLength() {
const elem = document.getElementById('myText');
if (elem.value.length > 200) {
elem.value = elem.value.slice(0, 200);
}
}
三、使用正则表达式过滤非法字符
若需限制用户只能输入特定类型的字符（如仅数字、字母或中文），可通过正则表达式匹配并清除不符合规则的内容。
1、定义一个符合要求的正则模式，例如/^[a-zA-Z0-9\u4e00-\u9fa5]+$/ 表示只允许英文、数字和中文。
2、在oninput事件中应用test()或replace()方法检测或替换非法字符。
3、示例代码：
<textarea oninput="this.value = this.value.replace(/[^a-zA-Z0-9]/g, '')"></textarea>，表示仅允许输入英文字母和数字。
四、利用HTML5 pattern属性配合表单验证
在包含提交操作的表单中，可使用pattern属性设定正则规则，在提交时自动验证输入是否合规。
1、在textarea或input上添加pattern="正则表达式"属性。
2、确保父级为form元素，并使用submit按钮触发验证。
3、浏览器会在提交前自动检查内容是否符合正则要求，不符合则阻断提交并提示错误。
4、示例：
<input type="text" pattern="[A-Za-z]{1,10}" title="请输入1到10个字母" required />
