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 相关文章推荐
js操作ajax返回的json的注意问题!
Feb 23 Javascript
jquery学习笔记 用jquery实现无刷新登录
Aug 08 Javascript
from 表单提交返回值用post或者是get方法实现
Aug 21 Javascript
javascript匿名函数实例分析
Nov 18 Javascript
使用angularjs创建简单表格
Jan 21 Javascript
JavaScript中eval函数的问题
Jan 31 Javascript
JS前向后瞻正则表达式定义与用法示例
Dec 27 Javascript
ES6新特性三: Generator(生成器)函数详解
Apr 21 Javascript
详解Web使用webpack构建前端项目
Sep 23 Javascript
vue中vee validate表单校验的几种基本使用
Jun 25 Javascript
javascript canvas时钟模拟器
Jul 13 Javascript
JavaScript实现前端网页版倒计时
Mar 24 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 array_merge下进行数组合并的代码
2008/07/22 PHP
生成ubuntu自动切换壁纸xml文件的php代码
2010/07/17 PHP
PHP加密解密字符串汇总
2015/04/26 PHP
PHP制作用户注册系统
2015/10/23 PHP
配置Nginx+PHP的正确思路与过程
2016/05/10 PHP
thinkPHP的表达式查询用法详解
2016/09/14 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
JavaScript 内置对象属性及方法集合
2010/07/04 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
2012/03/01 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
2013/04/19 Javascript
js实现图片点击左右轮播
2015/07/08 Javascript
js禁止浏览器的回退事件
2017/04/20 Javascript
jquery animate动画持续运动的实例
2017/11/29 jQuery
vue使用axios实现文件上传进度的实时更新详解
2017/12/20 Javascript
关于vue的npm run dev和npm run build的区别介绍
2019/01/14 Javascript
jQuery中使用validate插件校验表单功能
2019/05/24 jQuery
图解NodeJS实现登录注册功能
2019/09/16 NodeJs
如何优雅地取消 JavaScript 异步任务
2020/03/22 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
2020/08/14 Javascript
js实现详情页放大镜效果
2020/10/28 Javascript
js 实现碰撞检测的示例
2020/10/28 Javascript
Python实现替换文件中指定内容的方法
2018/03/19 Python
Python 字符串换行的多种方式
2018/09/06 Python
python在openstreetmap地图上绘制路线图的实现
2019/07/11 Python
春节到了 教你使用python来抢票回家
2020/01/06 Python
Python爬虫库requests获取响应内容、响应状态码、响应头
2020/01/25 Python
python GUI库图形界面开发之PyQt5窗口控件QWidget详细使用方法
2020/02/26 Python
详解用Pytest+Allure生成漂亮的HTML图形化测试报告
2020/03/31 Python
Django 后台带有字典的列表数据与页面js交互实例
2020/04/03 Python
写好自荐信要注意的问题
2013/11/10 职场文书
学生抄作业检讨书(2篇)
2014/10/17 职场文书
骨干教师申报材料
2014/12/17 职场文书
会议新闻稿
2015/07/17 职场文书
python-for x in range的用法(注意要点、细节)
2021/05/10 Python
Vue + iView实现Excel上传功能的完整代码
2021/06/22 Vue.js
html中相对位置与绝对位置的具体使用
2022/05/15 HTML / CSS