在前端开发中,很多情况下需对输入内容进行验证。实时统计功能,对于定长输入而言,可以让用户实时明确输入界限,并合理安排内容。
字数实时统计更新
下面将以【消息内容】为例,设计实现输入框字数实时统计更新功能。 项目架构如下:
message
message.css message.js message.tpl
1. 在message.tpl文件中定义网页元素
rush:xhtml;">
//移动端微信公众号开发
内容"
rows="3">
//web端业务开发
/200
Box-sizing: border-Box;">
2.在message.js文件中绑定事件,用以统计输入字符
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 = '';
$("#newtaskform").append(FileName);
$('#msgcontent').bind('input propertychange',200);
$(this).val(char);
fizeNum = 200;
$("#texttips").show();
}else{
$("#texttips").hide();
}
$(this).parent().find('.contentcount').text(fizeNum);
});