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 相关文章推荐
图片连续滚动代码[兼容IE/firefox]
Jun 11 Javascript
js jquery获取随机生成id的服务器控件的三种方法
Jul 11 Javascript
jquery制作LED 时钟特效
Feb 01 Javascript
jquery遍历函数siblings()用法实例
Dec 24 Javascript
微信小程序  生命周期详解
Oct 27 Javascript
Vue生命周期示例详解
Apr 12 Javascript
AngularJS实现根据不同条件显示不同控件
Apr 20 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
Aug 08 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
Oct 19 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
Nov 01 Javascript
vue ssr服务端渲染(小白解惑)
Nov 10 Javascript
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
Windows下PHP的任意文件执行漏洞
2006/10/09 PHP
php 图片加水印与上传图片加水印php类
2010/05/12 PHP
如何获知PHP程序占用多少内存(memory_get_usage)
2012/09/23 PHP
php版微信自定义回复功能示例
2016/12/05 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
给artDialog 5.02 增加ajax get功能详细介绍
2012/11/13 Javascript
javascript中的循环语句for语句深入理解
2014/04/04 Javascript
js实现在同一窗口浏览图片
2014/09/17 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
2015/10/26 Javascript
jquery及js实现动态加载js文件的方法
2016/01/21 Javascript
JS延时器提示框的应用实例代码解析
2016/04/27 Javascript
轻松理解Javascript变量的相关问题
2017/01/20 Javascript
基于vue的换肤功能的示例代码
2017/10/10 Javascript
利用Console来Debug的10个高级技巧汇总
2018/03/26 Javascript
详解element-ui中表单验证的三种方式
2019/09/18 Javascript
JS实现盒子拖拽效果
2020/02/06 Javascript
Javascript组合继承方法代码实例解析
2020/04/02 Javascript
three.js欧拉角和四元数的使用方法
2020/07/26 Javascript
利用Python画ROC曲线和AUC值计算
2016/09/19 Python
Python爬取十篇新闻统计TF-IDF
2018/01/03 Python
详解pandas DataFrame的查询方法(loc,iloc,at,iat,ix的用法和区别)
2019/08/02 Python
WxPython实现无边框界面
2019/11/18 Python
Python while循环使用else语句代码实例
2020/02/07 Python
python中pathlib模块的基本用法与总结
2020/08/17 Python
Python批量修改xml的坐标值全部转为整数的实例代码
2020/11/26 Python
详解解决jupyter不能使用pytorch的问题
2021/02/18 Python
社会实践感言
2014/01/25 职场文书
仓库组长岗位职责
2014/01/29 职场文书
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
2014年车间工作总结
2014/11/21 职场文书
导游欢迎词范文
2015/01/23 职场文书
暑期社会实践个人总结
2015/03/06 职场文书
学生会部长竞选稿
2015/11/19 职场文书
pytorch通过训练结果的复现设置随机种子
2021/06/01 Python
Spring依赖注入多种类型数据的示例代码
2022/03/31 Java/Android
Python如何利用pandas读取csv数据并绘图
2022/07/07 Python