html字段最大长度限制,html input 限制输入的长度并提示的方法

html 中 input 标签的 value 值的长度理论上应该是 2^32(数据来源于资料,没有测试过),但为了防止一些 input 的输入数据过长来做一些限制,该如何实现呢?这篇文章就来介绍一下,如何限制 input 输入数据的长度并且输入的数据超过规定的长度该如何去提示?

html input 限制输入字符串长度的方法

input 标签中的 maxlength 属性,可以用来规定输入字符串的最大长度。

示例代码:

html input 限制输入字符串的长度并提示的方法

maxlength 属性虽然可以限制 input 输入字符串的长度,但对于用户的体验来说是很不友好的,所以我们要利用 js 代码在 input 输入的字符超过规定的长度时给出提示!

jq示例代码:

$('#inputs').on('input propertychange',function(){

var num,le;

num = $(this).val().length;

le = parseInt($(this).attr('maxlength'))-1; // 这里是获取的 maxlength 属性的值

if (num > le) {

alert('长度超过限制!');

}

})

注意:

1、上面 js 代码中 le 变量规定的限制长度要比实际中少一位(减去一个1),不然不会触发判断逻辑

2、js 中 le 变量获取的是 maxlength 属性的值,如不想获取此属性的值,可以自定义!

3、使用上面的 js 代码前,要加载 jquery.js 文件!

原生 js 代码示例

function keyPress(ob) {

//这里比较时,要比实际的限制数量少一位才会触发判断逻辑!

if(ob.value.length > 9){

alert('长度超过限制啦!');

}

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值