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


Posted in Javascript onJune 17, 2017

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

字数实时统计更新

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通过JAVASCRIPT读取ASP设定的COOKIE
Feb 15 Javascript
JavaScript中常见陷阱小结
Apr 27 Javascript
javascript 事件绑定问题
Jan 01 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
Jan 17 Javascript
全屏js头像上传插件源码高清版
Mar 29 Javascript
javacript获取当前屏幕大小
Jun 04 Javascript
利用Angular.js限制textarea输入的字数
Oct 20 Javascript
JS验证不重复验证码
Feb 10 Javascript
JS严格模式知识点总结
Feb 27 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
详解Vue.js 作用域、slot用法(单个slot、具名slot)
Oct 15 Javascript
VUE.CLI4.0配置多页面入口的实现
Nov 25 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
Jun 17 #Javascript
bootstrap paginator分页前后台用法示例
Jun 17 #Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
Jun 17 #Javascript
深入理解Webpack 中路径的配置
Jun 17 #Javascript
详解Vue组件之间的数据通信实例
Jun 17 #Javascript
webpack打包后直接访问页面图片路径错误的解决方法
Jun 17 #Javascript
webpack学习教程之publicPath路径问题详解
Jun 17 #Javascript
You might like
在Windows下编译适用于PHP 5.2.12及5.2.13的eAccelerator.dll(附下载)
2010/05/04 PHP
php将数组转换成csv格式文件输出的方法
2015/03/14 PHP
ThinkPHP框架实现数据增删改
2017/05/07 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
JavaScript多线程的实现方法
2007/05/08 Javascript
动态加载js、css等文件跨iframe实现
2014/02/24 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
2014/05/12 Javascript
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
Javascript中的getUTCHours()方法使用详解
2015/06/10 Javascript
jQuery多级联动下拉插件chained用法示例
2016/08/20 Javascript
在web中js实现类似excel的表格控件
2016/09/01 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
2017/03/02 Javascript
vue loadmore 组件滑动加载更多源码解析
2017/07/19 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
2018/02/05 Javascript
JavaScript设计模式之享元模式实例详解
2019/01/17 Javascript
JavaScript中reduce()的5个基本用法示例
2020/07/19 Javascript
[04:55]完美世界副总裁蔡玮:DOTA2的自由、公平与信任
2013/12/18 DOTA
python静态方法实例
2015/01/14 Python
Python中表示字符串的三种方法
2017/09/06 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
Python企业编码生成系统之主程序模块设计详解
2019/07/26 Python
使用python+whoosh实现全文检索
2019/12/09 Python
pytorch中交叉熵损失(nn.CrossEntropyLoss())的计算过程详解
2020/01/02 Python
Python matplotlib画曲线例题解析
2020/02/07 Python
Python3连接Mysql8.0遇到的问题及处理步骤
2020/02/17 Python
Django使用Celery加redis执行异步任务的实例内容
2020/02/20 Python
Python 如何定义匿名或内联函数
2020/08/01 Python
HTML5之SVG 2D入门4—笔画与填充
2013/01/30 HTML / CSS
白色公司:The White Company
2017/10/11 全球购物
罗技美国官网:Logitech美国
2020/01/22 全球购物
我爱家乡演讲稿
2014/09/12 职场文书
2014年药剂科工作总结
2014/11/26 职场文书
2014年党小组工作总结
2014/12/20 职场文书
终止劳动合同通知书
2015/04/16 职场文书
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python
教你如何使用Python Tkinter库制作记事本
2021/06/10 Python