jQuery实现简易的输入框字数计数功能示例


Posted in Javascript onJanuary 16, 2017

本文实例讲述了jQuery实现简易的输入框字数计数功能。分享给大家供大家参考,具体如下:

运行效果图如下:

jQuery实现简易的输入框字数计数功能示例

具体代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<div class="container">
  <input id="abc" value="三水点靠木"><span id="wordCountShow"></span>
</div>
<script>
  $.fn.extend({
    wordCount: function (maxLength, wordWrapper) {
      var self = this;
      $(self).attr("maxlength", maxLength);
      showWordCount();
      $(this).on("input propertychange", showWordCount);
      function showWordCount() {
        curLength = $(self).val().length;
        var leaveCount = maxLength - curLength;
        wordWrapper.text(leaveCount + "/" + maxLength);
      }
    }
  })
  $(function () {
    $("#abc").wordCount(10, $("#wordCountShow"));
  })
</script>
</body>
</html>
Javascript 相关文章推荐
点击广告后才能获得下载地址
Oct 26 Javascript
关于Javascript模块化和命名空间管理的问题说明
Dec 06 Javascript
Grid得到选择行数据的方法总结
Jan 17 Javascript
js工具方法弹出蒙版
May 08 Javascript
在Linux上用forever实现Node.js项目自启动
Jul 09 Javascript
Vue.js中数据绑定的语法教程
Jun 02 Javascript
使用cropper.js裁剪头像的实例代码
Sep 29 Javascript
setTimeout时间设置为0详细解析
Mar 13 Javascript
详解es6超好用的语法糖Decorator
Aug 01 Javascript
layui table 参数设置方法
Aug 14 Javascript
Vue循环组件加validate多表单验证的实例
Sep 18 Javascript
node.js微信小程序配置消息推送的实现
Feb 13 Javascript
谈谈Vue.js——vue-resource全攻略
Jan 16 #Javascript
Javascript的this用法
Jan 16 #Javascript
jQuery向webApi提交post json数据
Jan 16 #Javascript
详解Html a标签中href和onclick用法、区别、优先级别
Jan 16 #Javascript
jQuery插件扩展操作入门示例
Jan 16 #Javascript
jQuery插件版本冲突的处理方法分析
Jan 16 #Javascript
js实现带缓动动画的导航栏效果
Jan 16 #Javascript
You might like
十天学会php之第五天
2006/10/09 PHP
php另类上传图片的方法(PHP用Socket上传图片)
2013/10/30 PHP
php中cookie的使用方法
2014/03/29 PHP
php警告Creating default object from empty value 问题的解决方法
2014/04/02 PHP
PHP实现将多个文件中的内容合并为新文件的方法示例
2017/06/10 PHP
php中curl和soap方式请求服务超时问题的解决
2018/06/11 PHP
web前端开发也需要日志
2010/12/09 Javascript
javascript生成json数据简单示例分享
2014/02/14 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
2014/12/17 Javascript
js设置文字颜色的方法示例
2016/12/30 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
2017/07/18 Javascript
基于Require.js使用方法(总结)
2017/10/26 Javascript
vue使用 better-scroll的参数和方法详解
2018/01/25 Javascript
jQuery实现的电子时钟效果完整示例
2018/04/28 jQuery
Javascript实现时间倒计时功能
2018/11/17 Javascript
jQuery实现的点击图片居中放大缩小功能示例
2019/01/16 jQuery
详解Vue 全局变量,局部变量
2019/04/17 Javascript
js实现橱窗展示效果
2020/01/11 Javascript
安装多版本Vue-CLI的实现方法
2020/03/24 Javascript
[05:11]TI9战队采访——VIRTUSPRO
2019/08/22 DOTA
[35:27]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第二场 10.29
2020/10/29 DOTA
python异步任务队列示例
2014/04/01 Python
Python collections模块实例讲解
2014/04/07 Python
Python使用pymysql从MySQL数据库中读出数据的方法
2018/07/25 Python
python爬取内容存入Excel实例
2019/02/20 Python
python调用c++返回带成员指针的类指针实例
2019/12/12 Python
Python求两个字符串最长公共子序列代码实例
2020/03/05 Python
Python使用pyexecjs代码案例解析
2020/07/13 Python
英国最大的电子产品和家电零售企业:Currys PC World
2016/09/24 全球购物
大二学生自我检讨书
2014/10/23 职场文书
寒暑假实习证明书模板
2014/11/29 职场文书
医生个人年终总结
2015/02/28 职场文书
大二学年个人总结
2015/03/03 职场文书
2015年五四青年节演讲稿
2015/03/18 职场文书
2015年保险业务员工作总结
2015/05/27 职场文书
信息技术课教学反思
2016/02/23 职场文书