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 相关文章推荐
js数组的操作详解
Mar 27 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
May 19 Javascript
jQuery判断复选框是否勾选的原理及示例
May 21 Javascript
javascript移动设备Web开发中对touch事件的封装实例
Jun 05 Javascript
js实现文件上传表单域美化特效
Nov 02 Javascript
用headjs来管理和加载js 提高网站加载速度
Nov 29 Javascript
前端开发不得不知的10个最佳ES6特性
Aug 30 Javascript
JS路由跳转的简单实现代码
Sep 21 Javascript
浅谈KOA2 Restful方式路由初探
Mar 14 Javascript
Vue 理解之白话 getter/setter详解
Apr 16 Javascript
VUE解决 v-html不能触发点击事件的问题
Oct 28 Javascript
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 Vue.js
谈谈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 将bmp图片转为jpg等其他任意格式的图片
2009/06/29 PHP
PHPstorm快捷键(分享)
2017/07/17 PHP
详解php协程知识点
2018/09/21 PHP
PHP-FPM 的管理和配置详解
2019/02/17 PHP
jQuery 树形结构的选择器
2010/02/15 Javascript
基于jQuery实现图片的前进与后退功能
2013/04/24 Javascript
javascript使用正则获取url上的某个参数
2014/09/04 Javascript
浅谈重写window对象的方法
2014/12/29 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
2015/07/21 Javascript
使用async-validator编写Form组件的方法
2018/01/10 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
2019/02/26 Javascript
送你43道JS面试题(收藏)
2019/06/17 Javascript
axios异步提交表单数据的几种方法
2019/08/11 Javascript
[01:01:35]Optic vs paiN 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python作用域用法实例详解
2016/03/15 Python
怎样使用Python脚本日志功能
2016/08/14 Python
numpy排序与集合运算用法示例
2017/12/15 Python
Python pyinotify日志监控系统处理日志的方法
2018/03/08 Python
使用python绘制温度变化雷达图
2019/10/18 Python
python 浅谈serial与stm32通信的编码问题
2019/12/18 Python
如何使用Cython对python代码进行加密
2020/07/08 Python
Python3利用openpyxl读写Excel文件的方法实例
2021/02/03 Python
Python 转移文件至云对象存储的方法
2021/02/07 Python
Carter’s官方旗舰店:美国受欢迎的婴童服装品牌
2018/01/21 全球购物
美国一家运动专业鞋类零售商:Warehouse Shoe Sale(WSS)
2018/03/28 全球购物
Brasty波兰:香水、化妆品、手表网上商店
2019/04/15 全球购物
Shopee菲律宾:在线购买和出售
2019/11/25 全球购物
Noon埃及:埃及在线购物
2019/11/26 全球购物
银行党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
局机关干部群众路线个人对照检查材料思想汇报
2014/10/05 职场文书
2014年纠风工作总结
2014/12/08 职场文书
2015年超市工作总结范文
2015/05/26 职场文书
体育委员竞选稿
2015/11/21 职场文书
2016年社会管理综治宣传月活动总结
2016/03/16 职场文书
诚信高考倡议书
2019/06/24 职场文书
Java常用工具类汇总 附示例代码
2021/06/26 Java/Android