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 相关文章推荐
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
May 27 Javascript
js切换光标示例代码
Oct 10 Javascript
Javascript 多浏览器兼容总结(实战经验)
Oct 30 Javascript
jQuery基于当前元素进行下一步的遍历
May 20 Javascript
判断复选框是否被选中的两种方法
Jun 04 Javascript
javascript实现数独解法
Mar 14 Javascript
AngularJS基础 ng-model 指令详解及示例代码
Aug 02 Javascript
BootStrap Table对前台页面表格的支持实例讲解
Dec 22 Javascript
使用JQ完成表格隔行换色的简单实例
Aug 25 Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
Mar 10 Javascript
国内常用的js类库大全(CDN公共库)
Jun 24 Javascript
vue实现折线图 可按时间查询
Aug 21 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
详解WordPress中用于更新和获取用户选项数据的PHP函数
2016/03/08 PHP
php获取数据库中数据的实现方法
2017/06/01 PHP
YII2.0框架行为(Behavior)深入详解
2019/07/26 PHP
Laravel中GraphQL接口请求频率实战记录
2020/09/01 PHP
offsetParent 算法分析
2010/04/05 Javascript
JS面向对象编程浅析
2011/08/28 Javascript
JQuery与JSon实现的无刷新分页代码
2011/09/13 Javascript
返回上一页并自动刷新的JavaScript代码
2014/02/19 Javascript
jquery ajax局部加载方法详解(实现代码)
2016/05/12 Javascript
javascript对象的相关操作小结
2016/05/16 Javascript
关于微信上网页图片点击全屏放大效果
2016/12/19 Javascript
jquery实现tab键进行选择后enter键触发click行为
2017/03/29 jQuery
vue下拉菜单组件(含搜索)的实现代码
2018/11/25 Javascript
Angular8 实现table表格表头固定效果
2020/01/03 Javascript
vue实现日历表格(element-ui)
2020/09/24 Javascript
python启动办公软件进程(word、excel、ppt、以及wps的et、wps、wpp)
2009/04/09 Python
python教程之用py2exe将PY文件转成EXE文件
2014/06/12 Python
使用python实现knn算法
2017/12/20 Python
Python实现批量读取图片并存入mongodb数据库的方法示例
2018/04/02 Python
对numpy Array [: ,] 的取值方法详解
2018/07/02 Python
python3实现字符串操作的实例代码
2019/04/16 Python
浅谈pytorch中torch.max和F.softmax函数的维度解释
2020/06/28 Python
Python pysnmp使用方法及代码实例
2020/08/24 Python
如何设置PyCharm中的Python代码模版(推荐)
2020/11/20 Python
pytho matplotlib工具栏源码探析一之禁用工具栏、默认工具栏和工具栏管理器三种模式的差异
2021/02/25 Python
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
PHP面试题附答案
2015/11/28 面试题
运动会广播稿300字
2014/01/10 职场文书
军训考核自我鉴定
2014/02/13 职场文书
会议主持词
2014/03/17 职场文书
服装设计师求职信
2014/06/04 职场文书
小学生成绩单评语
2014/12/31 职场文书
庆六一开幕词
2015/01/29 职场文书
2015个人半年总结范文
2015/03/09 职场文书
2019年大学毕业生个人自我鉴定范文大全
2019/03/21 职场文书
幼儿教师三分钟演讲稿
2019/06/21 职场文书