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 动态扩展对象之另类视角
May 25 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
Jul 01 Javascript
浅谈angularJS中的事件
Jul 12 Javascript
js图片切换具体实现代码
Oct 13 Javascript
任意Json转成无序列表的方法示例
Dec 09 Javascript
原生JS实现跑马灯效果
Feb 20 Javascript
关于Node.js的events.EventEmitter用法介绍
Apr 01 Javascript
socket.io学习教程之深入学习篇(三)
Apr 29 Javascript
JS实现简单的星期格式转换功能示例
Jul 23 Javascript
原生JS与JQ获取元素的区别详解
Feb 13 Javascript
google广告之另类js调用实现代码
Aug 22 Javascript
JavaScript 定时器详情
Nov 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
一个显示效果非常不错的PHP错误、异常处理类
2014/03/21 PHP
php+mysqli使用面向对象方式查询数据库实例
2015/01/29 PHP
PHP也能干大事之PHP中的编码解码详解
2015/04/20 PHP
PHP中的traits简单使用实例
2015/05/13 PHP
Yii2 输出xml格式数据的方法
2016/05/03 PHP
CodeIgniter集成smarty的方法详解
2016/05/26 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
java解析json方法总结
2019/05/16 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
不同浏览器对回车提交表单的处理办法
2010/02/13 Javascript
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
2010/05/06 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
2013/01/24 Javascript
eclipse如何忽略js文件报错(附图)
2013/10/30 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
2016/08/05 Javascript
使用Javascript监控前端相关数据的代码
2016/10/27 Javascript
JavaScript构建自己的对象示例
2016/11/29 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
2018/10/19 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
2020/10/09 jQuery
python连接MySQL、MongoDB、Redis、memcache等数据库的方法
2013/11/15 Python
Python 获取新浪微博的最新公共微博实例分享
2014/07/03 Python
Python 基础知识之字符串处理
2017/01/06 Python
python爬虫爬取网页表格数据
2018/03/07 Python
PYQT5设置textEdit自动滚屏的方法
2019/06/14 Python
python3.7.3版本和django2.2.3版本是否可以兼容
2020/09/01 Python
python中entry用法讲解
2020/12/04 Python
在HTML5 canvas里用卷积核进行图像处理的方法
2018/05/02 HTML / CSS
BIBLOO捷克:购买女装、男装、童装、鞋和配件
2017/01/27 全球购物
西班牙香水和化妆品连锁店:Druni
2019/05/05 全球购物
为什么使用接口?
2014/08/13 面试题
自我评价如何写好?
2014/01/05 职场文书
投标保密承诺书
2014/05/19 职场文书
小学教师师德承诺书
2014/05/23 职场文书
美食节目策划方案
2014/05/31 职场文书
关于学习的决心书
2015/02/05 职场文书
Python基础之tkinter图形化界面学习
2021/04/29 Python
javascript拖曳互换div的位置实现示例
2021/06/28 Javascript