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 相关文章推荐
解放web程序员的输入验证
Oct 06 Javascript
Javascript中Eval函数的使用说明
Oct 11 Javascript
Extjs Ext.MessageBox.confirm 确认对话框详解
Apr 02 Javascript
IE本地存储userdata的一个bug说明
Jul 01 Javascript
JS动态修改图片的URL(src)的方法
Apr 01 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
Oct 05 Javascript
详谈JavaScript的闭包及应用
Jan 17 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
Feb 08 Javascript
VUE预渲染及遇到的坑
Sep 03 Javascript
一步步教你利用Docker设置Node.js
Nov 20 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
Jun 02 Javascript
JS函数式编程实现XDM一
Jun 16 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修改xml文档内容的方法
2015/01/23 PHP
php7 新增功能实例总结
2020/05/25 PHP
Javascript调试工具(下载)
2007/01/09 Javascript
关闭浏览器时提示onbeforeunload事件
2013/12/25 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
2014/04/04 Javascript
JS仿Windows开机启动Loading进度条的方法
2015/02/26 Javascript
jQuery使用cookie与json简单实现购物车功能
2016/04/15 Javascript
jQuery实现无限往下滚动效果代码
2016/04/16 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
2016/06/13 Javascript
JS控制层作圆周运动的方法
2016/06/20 Javascript
图文详解JavaScript的原型对象及原型链
2016/08/02 Javascript
js注入 黑客之路必备!
2016/09/14 Javascript
AngularJS封装指令方法详解
2016/12/12 Javascript
vue2笔记 — vue-router路由懒加载的实现
2017/03/03 Javascript
angularjs实现猜大小功能
2017/10/23 Javascript
React中的render何时执行过程
2018/04/13 Javascript
Vue动态控制input的disabled属性的方法
2018/06/26 Javascript
详解.vue文件中style标签的几个标识符
2018/07/17 Javascript
vue修改对象的属性值后页面不重新渲染的实例
2018/08/09 Javascript
详解如何用typescript开发koa2的二三事
2018/11/13 Javascript
vue项目每30秒刷新1次接口的实现方法
2018/12/04 Javascript
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
详解Vue 项目中的几个实用组件(ts)
2019/10/29 Javascript
Vuex实现数据共享的方法
2019/12/20 Javascript
js绘制一条直线并旋转45度
2020/08/21 Javascript
linux 下实现python多版本安装实践
2014/11/18 Python
基于Python的关键字监控及告警
2017/07/06 Python
python搭建服务器实现两个Android客户端间收发消息
2018/04/12 Python
解决Django no such table: django_session的问题
2020/04/07 Python
python3:excel操作之读取数据并返回字典 + 写入的案例
2020/09/01 Python
Sephora丝芙兰马来西亚官方网站:国际化妆品购物
2018/03/15 全球购物
澳洲健康食品网上商店:Aussie Health Products
2018/06/15 全球购物
优秀共产党员事迹材料
2014/12/18 职场文书
2015年中职班主任工作总结
2015/05/25 职场文书
小孩不笨观后感
2015/06/03 职场文书
python实现简易名片管理系统
2021/04/11 Python