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

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

字数实时统计更新

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

message

message.css message.js message.tpl

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

rush:xhtml;"> //移动端微信公众号开发
内容" rows="3">
/200
//web端业务开发

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 = '
消息内容'+ '
' + '
display: none; color: #ff0000;">消息内容超出最大限制/200
' + '
'; $("#newtaskform").append(FileName); $('#msgcontent').bind('input propertychange',200); $(this).val(char); fizeNum = 200; $("#texttips").show(); }else{ $("#texttips").hide(); } $(this).parent().find('.contentcount').text(fizeNum); });

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

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...