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 相关文章推荐
用javascript实现计算两个日期的间隔天数
Aug 14 Javascript
JavaScript Konami Code 实现代码
Jul 29 Javascript
JavaScript 类型的包装对象(Typed Wrappers)
Oct 27 Javascript
节点的插入之append()和appendTo()的用法介绍
Jan 13 Javascript
jQuery ajax提交Form表单实例(附demo源码)
Apr 06 Javascript
node.js中express-session配置项详解
May 31 Javascript
利用vscode编写vue的简单配置详解
Jun 17 Javascript
详解关于html,css,js三者的加载顺序问题
Apr 10 Javascript
element-ui 中使用upload多文件上传只请求一次接口
Jul 19 Javascript
vue改变循环遍历后的数据实例
Nov 07 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
Jul 31 Javascript
微信小程序实现翻牌抽奖动画
Sep 21 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
一个颜色轮换的简单例子
2006/10/09 PHP
下载文件的点击数回填
2006/10/09 PHP
Dedecms常用函数解析
2008/02/01 PHP
PHP生成Flash动画的实现代码
2010/03/12 PHP
基于PHP文件操作的详细诠释
2013/06/21 PHP
PHP7扩展开发之基于函数方式使用lib库的方法详解
2018/01/15 PHP
PHP简单实现记录网站访问量功能示例
2018/06/06 PHP
javascript比较文档位置
2008/04/08 Javascript
JS实现一键回顶功能示例代码
2013/10/28 Javascript
原生javascript实现无间缝滚动示例
2014/01/28 Javascript
JS实现闪动的title消息提醒效果
2014/06/20 Javascript
jquery 中ajax执行的优先级
2015/06/22 Javascript
两种JS实现屏蔽鼠标右键的方法
2020/08/20 Javascript
js实现页面a向页面b传参的方法
2016/05/29 Javascript
JS实现关闭当前页而不弹出提示框的方法
2016/06/22 Javascript
javascript实现瀑布流动态加载图片原理
2016/08/12 Javascript
jquery 校验中国身份证号码实例详解
2017/04/11 jQuery
微信小程序商城项目之侧栏分类效果(1)
2017/04/17 Javascript
React应用中使用Bootstrap的方法
2017/08/15 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
2017/08/24 jQuery
vue2.x+webpack快速搭建前端项目框架详解
2017/11/30 Javascript
深入浅出webpack之externals的使用
2017/12/04 Javascript
jQuery实现使用sort方法对json数据排序的方法
2018/04/17 jQuery
Moment.js实现多个同时倒计时
2019/08/26 Javascript
[01:02:18]VGJ.S vs infamous Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
Python正则表达式的使用范例详解
2014/08/08 Python
Python中使用PIL库实现图片高斯模糊实例
2015/02/08 Python
Python中使用ElementTree解析XML示例
2015/06/02 Python
Python中字典的浅拷贝与深拷贝用法实例分析
2018/01/02 Python
python素数筛选法浅析
2018/03/19 Python
解决python replace函数替换无效问题
2020/01/18 Python
Pycharm最常用的快捷键及使用技巧
2020/03/05 Python
HTML5自定义元素播放焦点图动画的实现
2019/09/25 HTML / CSS
MaBelle玛贝尔香港官网:香港钻饰连锁店
2019/09/09 全球购物
节能标语大全
2014/06/21 职场文书
教师拔河比赛广播稿
2014/10/14 职场文书