js php 实时更新数字,js输入框字数实时更新的实例教程

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

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

字数实时统计更新

下面将以【消息内容】为例，设计实现输入框字数实时统计更新功能。

项目架构如下：

message

message.css

message.js

message.tpl

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

//移动端微信公众号开发

rows="3">

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);

});