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 相关文章推荐
限制文本框输入N个字符的js代码
May 13 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
Jan 15 Javascript
Javascript图像处理—平滑处理实现原理
Dec 28 Javascript
jquery属性过滤选择器使用示例
Jun 18 Javascript
随鼠标上下滚动的jquery代码
Dec 05 Javascript
详解Bootstrap glyphicons字体图标
Jan 04 Javascript
纯js实现瀑布流布局及ajax动态新增数据
Apr 07 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
Dec 04 Javascript
bootstrap多种样式进度条展示
Dec 20 Javascript
vue中将html字符串转换成html后遇到的问题小结
Dec 10 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
JS实现给数组对象排序的方法分析
Jun 24 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
后宫无数却洁身自好的男主,唐三只爱小舞
2020/03/02 国漫
php HandlerSocket的使用
2011/05/02 PHP
浅析php设计模式之数据对象映射模式
2016/03/03 PHP
教你在header中隐藏php的版本信息
2016/08/10 PHP
Laravel 实现Controller向blade前台模板赋值的四种方式小结
2019/10/22 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
基于jquery的合并table相同单元格的插件(精简版)
2011/04/05 Javascript
javascript修改表格背景色实例代码分享
2013/12/10 Javascript
使用jquery+CSS实现控制打印样式
2014/12/31 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
2015/09/14 Javascript
获取JS中网页各种高宽与位置的方法总结
2016/07/27 Javascript
vue修改vue项目运行端口号的方法
2017/08/04 Javascript
JS实现碰撞检测的方法分析
2018/01/19 Javascript
Vue波纹按钮组件制作
2018/04/30 Javascript
iView框架问题整理小结
2018/10/16 Javascript
基于nodejs的微信JS-SDK简单应用实现
2019/05/21 NodeJs
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
2019/06/04 Javascript
JavaScript Dom 绑定事件操作实例详解
2019/10/02 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
2020/04/22 Javascript
[01:05:00]2018国际邀请赛 表演赛 Pain vs OpenAI
2018/08/24 DOTA
python实现图像识别功能
2018/01/29 Python
Python学习笔记之open()函数打开文件路径报错问题
2018/04/28 Python
python实现学员管理系统
2019/02/26 Python
Python实现投影法分割图像示例(二)
2020/01/17 Python
python 实现分组求和与分组累加求和代码
2020/05/18 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
python 使用elasticsearch 实现翻页的三种方式
2020/07/31 Python
加拿大廉价机票预订网站:CheapOair.ca
2018/03/04 全球购物
秋季婚礼证婚词
2014/01/11 职场文书
周年庆典邀请函范文
2014/01/24 职场文书
冬季施工防火方案
2014/05/17 职场文书
团队激励口号
2014/06/06 职场文书
诉讼授权委托书
2014/10/15 职场文书
个人借款协议书范本
2014/11/17 职场文书
2016思想纪律作风整顿心得体会
2016/01/23 职场文书
MySQL的索引你了解吗
2022/03/13 MySQL