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 相关文章推荐
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
May 04 Javascript
web基于浏览器的本地存储方法应用
Nov 27 Javascript
字段太多jquey快速清空表单内容方法
Aug 21 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
Oct 11 Javascript
Vue.js每天必学之数据双向绑定
Sep 05 Javascript
js实现3d悬浮效果
Feb 16 Javascript
基于jQuery实现瀑布流页面
Apr 11 jQuery
详解Node.js access_token的获取、存储及更新
Jun 20 Javascript
Webpack性能优化 DLL 用法详解
Aug 10 Javascript
小程序云函数调用API接口的方法
May 17 Javascript
vscode中Vue别名路径提示的实现
Jul 31 Javascript
HTML+JS实现在线朗读器
Feb 15 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 post大量数据时发现数据丢失问题解决方法
2015/06/20 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
PHP实现爬虫爬取图片代码实例
2021/03/03 PHP
类似框架的js代码
2006/11/09 Javascript
jQeury淡入淡出需要注意的问题
2010/09/08 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
2011/02/24 Javascript
ie6下png图片背景不透明的解决办法使用js实现
2013/01/11 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
2013/09/29 Javascript
jQuery中before()方法用法实例
2014/12/25 Javascript
JavaScript实现数字数组按照倒序排列的方法
2015/04/06 Javascript
jquery实现多条件筛选特效代码分享
2015/08/28 Javascript
Bootstrap table的使用方法
2016/11/02 Javascript
JS冒泡事件与事件捕获实例详解
2016/11/25 Javascript
javascript实现页面滚屏效果
2017/01/17 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
2017/05/20 Javascript
js实现鼠标拖拽多选功能示例
2017/08/01 Javascript
React如何利用相对于根目录进行引用组件详解
2017/10/09 Javascript
layer.close()关闭进度条和Iframe窗的方法
2018/08/17 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
2021/02/25 Vue.js
[40:29]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第一场
2018/04/10 DOTA
Python中static相关知识小结
2018/01/02 Python
Python安装pycurl失败的解决方法
2018/10/15 Python
利用django model save方法对未更改的字段依然进行了保存
2020/03/28 Python
Tensorflow实现将标签变为one-hot形式
2020/05/22 Python
使用Keras 实现查看model weights .h5 文件的内容
2020/06/09 Python
python中random模块详解
2021/03/01 Python
高级护理实习生自荐信
2013/09/28 职场文书
毕业生个人投资创业计划书
2014/01/04 职场文书
大学生毕业求职自荐书范文
2014/02/04 职场文书
一名老师的自我评价
2014/02/07 职场文书
《鸟的天堂》教学反思
2014/02/27 职场文书
2014教师年度工作总结
2014/11/10 职场文书
2015年小学教科研工作总结
2015/07/20 职场文书
驾驶员管理制度范本
2015/08/06 职场文书
幼儿园体操比赛口号
2015/12/25 职场文书
Go获取两个时区的时间差
2022/04/20 Golang