这里有新鲜出炉的Javascript教程,程序狗速度看过来!
Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了JavaScript输入框字数实时统计更新,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
在前端开发中,很多情况下需对输入内容进行验证。实时统计功能,对于定长输入而言,可以让用户实时明确输入界限,并合理安排内容。
字数实时统计更新
下面将以【消息内容】为例,设计实现输入框字数实时统计更新功能。
项目架构如下:
message
message.CSS
message.js
message.tpl
1. 在message.tpl文件中定义网页元素
- //移动端微信公众号开发
- <div class="weui-cell__bd">
- <textarea id="content" class="weui-textarea" placeholder="新消息内容"
- rows="3">
- </textarea>
- <div class="weui-textarea-counter">
- <span class="contentcount">0</span>/200
- </div>
- </div>
- //web端业务开发
- <div class="modal-body" style="box-sizing: border-box;">
- <form id="newtaskform" class="form-horizontal"></form>
- </div>
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 = '<div class="form-group" id="text"><label class="col-sm-3 control-label" id="textlabel"><span class="dot"></span>消息内容</label>' + '<div class="col-sm-9 input-container "><textarea id="msgcontent" name="text" rows="8" style="width:100%;padding-right:20px"></textarea>' + '<div class="counter" style="float:right;">' + '<span id="texttips" style="display: none; color: #ff0000;">消息内容超出最大限制</span><span class="contentcount">0</span>/200</div>' + '</div></div>';
- $("#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);
- });
来源: http://www.phperz.com/article/17/0903/338592.html