利用JS限制用户输入的字数一般用在留言板程序,最典型的就是发微博限制字数是140字。按照往常的思路就是在用户提交数据的时候使用JS对表单中的数据进行检测,如果有不符合规则的字段进行提示而且返回值为FALSE,最终阻止不合规则的数据提交并储存在数据库中。
这样做虽然可靠,但是用户体验不佳,因为在收到字数限制的提示后,用户还要返回进行重新编辑,并且再次重试提交,并不保证接下来提交的数据字数符合规则。
最好的方式就是在用户输入的同时对输入框中的字进行统计,如果超出字数,就无法继续输入。这样一来,提高了用户一次性提交成功的几率。
方式同样是使用JS的方式,但是事件的启用自然是在textarea中。代码如下:
<textarea onkeyup='value=value.substr(0,140);this.nextSibling.innerHTML=value.length+"/10";'></textarea><div>0/10</div>
预览的效果如下:
输入的时候,会在下方的数字显示输入的字符,如果超出就会自动被删除。这与web微博实现的功能一模一样。
缺陷:经过测试,通过这种方式编辑的网页在windows phone 8 自带的浏览器中无法输入中文,不排除在其他的浏览器中也会出现这种情况。
感谢你的赏识与认可
支付宝
微信支付
使用手机访问这篇文章
本文许可协议 © CC BY-NC-SA 4.0 转载请注明来源
- 上一篇: 三种网页的正确跳转方式
- 下一篇: 用PHP快速设计一个搜索功能
暂无评论