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 相关文章推荐
用YUI做了个标签浏览效果
Feb 20 Javascript
jQuery实现的向下图文信息滚动效果
May 03 Javascript
JS获取鼠标选中的文字
Aug 10 Javascript
js style.display=block显示布局错乱问题的解决方法
Sep 21 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
Sep 28 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
Nov 05 Javascript
JS碰撞运动实现方法详解
Dec 15 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
Mar 04 Javascript
react native仿微信PopupWindow效果的实例代码
Aug 07 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
Jul 18 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
Oct 02 Javascript
Vue Element-ui表单校验规则实现
Jul 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的一些基础知识分享
2011/07/27 PHP
通过PHP的内置函数,通过DES算法对数据加密和解密
2012/06/21 PHP
phpadmin如何导入导出大数据文件及php.ini参数修改
2013/02/18 PHP
php定时计划任务的实现方法详解
2013/06/06 PHP
php fsockopen伪造post与get方法的详解
2013/06/14 PHP
php检测文件编码的方法示例
2014/04/25 PHP
PHP中使用gettext解决国际化问题的例子(i18n)
2014/06/13 PHP
php制作的简单验证码识别代码
2016/01/26 PHP
PHP仿微信发红包领红包效果
2016/10/30 PHP
PHP session垃圾回收机制实例分析
2019/06/28 PHP
基于jQuery实现表格数据的动态添加与统计的代码
2011/01/31 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
2013/09/12 Javascript
html5+javascript制作简易画板附图
2014/04/25 Javascript
JS学习之表格的排序简单实例
2016/05/16 Javascript
JS实现重新加载当前页面
2016/11/29 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
2017/11/01 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
2017/12/07 Javascript
详解如何优雅地在React项目中使用Redux
2017/12/28 Javascript
详解webpack之scss和postcss-loader的配置
2018/01/09 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
2018/12/05 Javascript
爬虫利器Puppeteer实战
2019/01/09 Javascript
vue路由守卫+登录态管理实例分析
2019/05/21 Javascript
js实现多张图片每隔一秒切换一张图片
2019/07/29 Javascript
vue中使用rem布局代码详解
2019/10/30 Javascript
通过滑动翻页效果实现和移动端click事件问题
2021/01/26 Javascript
python获得linux下所有挂载点(mount points)的方法
2015/04/29 Python
python脚本爬取字体文件的实现方法
2017/04/29 Python
python奇偶行分开存储实现代码
2018/03/19 Python
python把数组中的数字每行打印3个并保存在文档中的方法
2018/07/17 Python
python GUI库图形界面开发之PyQt5美化窗体与控件(异形窗体)实例
2020/02/25 Python
Python selenium抓取虎牙短视频代码实例
2020/03/02 Python
基于Django快速集成Echarts代码示例
2020/12/01 Python
Stefania Mode英国:奢华设计师和时尚服装
2017/10/23 全球购物
巴西24小时在线药房:Drogasil
2020/06/20 全球购物
劳资协议书范本
2014/04/23 职场文书
肖申克救赎观后感
2015/06/02 职场文书