JavaScript输入框字数实时统计更新

这篇文章主要介绍了JavaScript输入框字数实时统计更新,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

在前端开发中,很多情况下需对输入内容进行验证。实时统计功能,对于定长输入而言,可以让用户实时明确输入界限,并合理安排内容。

字数实时统计更新

下面将以【消息内容】为例,设计实现输入框字数实时统计更新功能。
项目架构如下:

message 

    message.css
    message.js
    message.tpl 

1. 在message.tpl文件中定义网页元素

 //移动端微信公众号开发 
0/200
//web端业务开发

2.在message.js文件中绑定事件,用以统计输入字符

 //移动端 tooltips提示形式 $('#content').bind('input propertychange', function () { var fizeNum = $(this).val().length; if (fizeNum > 200) { var char = $(this).val(); char = char.substr(0, 200); $(this).val(char); fizeNum = 200; tooltipsShow('消息内容不能超过200字'); } $(this).parent().find('.contentcount').text(fizeNum); }); //web网页span提示形式 FileName = '
'+ '
' + '
' + '0/200
' + '
'; $("#newtaskform").append(FileName); $('#msgcontent').bind('input propertychange', function () { var fizeNum = $(this).val().length; if (fizeNum > 200) { var char = $(this).val(); char = char.substr(0, 200); $(this).val(char); fizeNum = 200; $("#texttips").show(); }else{ $("#texttips").hide(); } $(this).parent().find('.contentcount').text(fizeNum); });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持html中文网。

以上就是JavaScript输入框字数实时统计更新的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » JavaScript 教程