<input>字段的minlength属性似乎不起作用。
在HTML中是否有其他属性可以帮助我设置字段值的最小长度?
<input>字段的minlength属性似乎不起作用。
在HTML中是否有其他属性可以帮助我设置字段值的最小长度?
当前回答
同时添加最大值和最小值。您可以指定允许的值的范围:
<input type="number" min="1" max="999" />
其他回答
看到http://caniuse.com/搜索=最小长度。某些浏览器可能不支持此属性。
如果"type"的值是其中之一:
文本,电子邮件,搜索,密码,电话或URL(警告:不包括数字|没有浏览器支持“电话”现在- 2017.10)
使用minlength(/ maxlength)属性。它指定最小字符数。
例如,
<input type="text" minlength="11" maxlength="11" pattern="[0-9]*" placeholder="input your phone number">
或者使用"pattern"属性:
<input type="text" pattern="[0-9]{11}" placeholder="input your phone number">
如果“type”是number,虽然不支持minlength(/ maxlength),但可以使用min(/ max)属性来代替它。
例如,
<input type="number" min="100" max="999" placeholder="input a three-digit number">
maxlength最聪明的方法
$(“html”)。On ("keydown keyup change", "input", function(){ var最大长度= $(这).attr(最大长度); 如果(最大长度){ = $ var值(这).val (); 如果(value.length < =最大长度){ (美元).attr(“v”,价值); } 其他{ ((这).val美元(这).attr (' v ')); } } }); < script src = " https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js " > < /脚本> <input type="text" maxlength="10">
不是HTML5,但无论如何都很实用:如果你碰巧使用AngularJS,你可以在输入和文本区域都使用ng-minlength(或data-ng-minlength)。看看这个Plunk。
我的解决方案textarea使用jQuery和结合HTML5需要验证,以检查最小长度。
minlength.js
$(document).ready(function(){
$('form textarea[minlength]').on('keyup', function(){
e_len = $(this).val().trim().length
e_min_len = Number($(this).attr('minlength'))
message = e_min_len <= e_len ? '' : e_min_len + ' characters minimum'
this.setCustomValidity(message)
})
})
HTML
<form action="">
<textarea name="test_min_length" id="" cols="30" rows="10" minlength="10"></textarea>
</form>
如果需要这种行为,总是在输入字段上显示一个小前缀,否则用户不能删除前缀:
// prefix="prefix_text"
// If the user changes the prefix, restore the input with the prefix:
if(document.getElementById('myInput').value.substring(0,prefix.length).localeCompare(prefix))
document.getElementById('myInput').value = prefix;