首页 / 技术 / 正文

JS中动态限制用户输入字数代码

2014年11月05日 暂无评论 ... 技术

利用JS限制用户输入的字数一般用在留言板程序,最典型的就是发微博限制字数是140字。按照往常的思路就是在用户提交数据的时候使用JS对表单中的数据进行检测,如果有不符合规则的字段进行提示而且返回值为FALSE,最终阻止不合规则的数据提交并储存在数据库中。

这样做虽然可靠,但是用户体验不佳,因为在收到字数限制的提示后,用户还要返回进行重新编辑,并且再次重试提交,并不保证接下来提交的数据字数符合规则。

最好的方式就是在用户输入的同时对输入框中的字进行统计,如果超出字数,就无法继续输入。这样一来,提高了用户一次性提交成功的几率。

方式同样是使用JS的方式,但是事件的启用自然是在textarea中。代码如下:

<textarea onkeyup='value=value.substr(0,140);this.nextSibling.innerHTML=value.length+"/10";'></textarea><div>0/10</div>

预览的效果如下:

QQ图片20141105222735

QQ图片20141105222748

输入的时候,会在下方的数字显示输入的字符,如果超出就会自动被删除。这与web微博实现的功能一模一样。

 

缺陷:经过测试,通过这种方式编辑的网页在windows phone 8 自带的浏览器中无法输入中文,不排除在其他的浏览器中也会出现这种情况。

暂无评论

发布评论