HTML 属性:minlength
minlength
属性定义了用户可以在 <input>
或 <textarea>
中输入的字符串长度的最小值。该属性的值必须是非负整数。
字符串长度是以 UTF-16 码元为单位进行计算的,通常(对大多数文本而言)等同于字符个数。如果未指定 minlength
,或指定了无效值,则输入将没有最小长度限制。该值必须小于或等于 maxlength 的值,否则该值将永远无效,因为不可能同时满足这两个条件。
如果字段文本值的长度小于 minlength
的 UTF-16 码元长度,输入将无法通过约束验证,validityState.tooShort
将返回 true
。只有当用户更改值时,才会应用限制验证。一旦提交失败,某些浏览器会显示错误信息,说明所需的最小长度和当前长度。
minlength
不意味着输入为 required
;只有当用户输入了一个值时,输入才会违反 minlength
约束。如果输入不是 required
的,即使设置了 minlength
,也可以提交空字符串。
尝试一下
示例
通过指定 minlength="5"
,值要么为空,要么至少为 5 个字符时才为有效。
html
<label for="fruit">输入长度至少为 5 个字母的水果名称</label>
<input type="text" minlength="5" id="fruit" />
我们可以使用伪类,根据值是否有效来设计元素样式。只要值为空或其长度大于等于 5,该值就是有效的。如 Lime 是无效的,而 lemon 是有效的。
css
input {
border: 2px solid currentcolor;
}
input:invalid {
border: 2px dashed red;
}
input:invalid:focus {
background-image: linear-gradient(pink, lightgreen);
}
规范
Specification |
---|
HTML Standard # attr-input-minlength |
HTML Standard # attr-textarea-minlength |
浏览器兼容性
html.elements.input.minlength
BCD tables only load in the browser
html.elements.textarea.minlength
BCD tables only load in the browser