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 相关文章推荐
jQuery方法简洁实现隔行换色及toggleClass的使用
Mar 15 Javascript
JS简单实现元素复制示例附图
Nov 19 Javascript
jQuery中has()方法用法实例
Jan 06 Javascript
JS中Location使用详解
May 12 Javascript
移动Web中图片自适应的两种JavaScript解决方法
Jun 18 Javascript
jQuery图片轮播插件——前端开发必看
May 31 Javascript
JS实现的表格行上下移动操作示例
Aug 03 Javascript
vue的Virtual Dom实现snabbdom解密
May 03 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
Nov 17 Javascript
JavaScript实现创建自定义对象的常用方式总结
Jul 09 Javascript
详解小程序如何避免多次点击,重复触发事件
Apr 08 Javascript
如何实现一个简易版的vuex持久化工具
Sep 11 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
php5.2.0内存管理改进
2007/01/22 PHP
php中将html中的br换行符转换为文本输入中的换行符
2013/03/26 PHP
php中上传文件的的解决方案
2018/09/25 PHP
laravel框架 laravel-admin上传图片到oss的方法
2019/10/13 PHP
分享8款优秀的 jQuery 加载动画和进度条插件
2012/10/24 Javascript
浏览器打开层自动缓慢展开收缩实例代码
2013/07/04 Javascript
JavaScript中的关键字&quot;VAR&quot;使用详解 分享
2013/07/31 Javascript
jquery二级导航内容均分的原理及实现
2013/08/13 Javascript
jQuery实现下滑菜单导航效果代码
2015/08/25 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
2016/05/27 Javascript
JQuery异步加载PartialView的方法
2016/06/07 Javascript
浅谈如何使用 webpack 优化资源
2017/10/20 Javascript
JS实现数组深拷贝的方法分析
2019/03/06 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
2019/04/24 Javascript
M2实现Nodejs项目自动部署的方法步骤
2019/05/05 NodeJs
antd多选下拉框一行展示的实现方式
2020/10/31 Javascript
[46:53]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
[01:38]完美世界DOTA2联赛(PWL)宣传片:第一站
2020/10/26 DOTA
[01:04:02]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第二场 1月24日
2021/03/11 DOTA
python实现无证书加密解密实例
2014/10/27 Python
python实现在每个独立进程中运行一个函数的方法
2015/04/23 Python
python实现矩阵乘法的方法
2015/06/28 Python
python使用__slots__让你的代码更加节省内存
2018/09/05 Python
pandas 选取行和列数据的方法详解
2019/08/08 Python
python程序中的线程操作 concurrent模块使用详解
2019/09/23 Python
pyqt5、qtdesigner安装和环境设置教程
2019/09/25 Python
Python3爬虫中关于中文分词的详解
2020/07/29 Python
详解python使用金山词霸的翻译功能(调试工具断点的使用)
2021/01/07 Python
世界上最大的巴士旅游观光公司:Big Bus Tours
2016/10/20 全球购物
学生实习推荐信范文
2013/11/26 职场文书
市场开发与营销专业求职信
2013/12/31 职场文书
写给妈妈的道歉信
2014/01/11 职场文书
中学生期中自我鉴定
2014/04/20 职场文书
我的中国梦演讲稿初中篇
2014/08/19 职场文书
Go 实现英尺和米的简单单位换算方式
2021/04/29 Golang
html+css实现分层金字塔的实例
2021/06/02 HTML / CSS