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>
PS：这里再为大家提供几款带有字数统计功能的在线工具供大家参考使用：
在线字数统计工具：
http://tools.jb51.net/code/zishutongji
在线文本美化排版工具：
http://tools.jb51.net/aideddesign/txt_paiban
在线自动排版与转换工具：
http://tools.jb51.net/aideddesign/txt_beaut
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
-
本文向大家介绍vue.js实现只能输入数字的输入框，包括了vue.js实现只能输入数字的输入框的使用技巧和注意事项，需要的朋友参考一下 在菜鸟教程里，看了vue.js的教程，看完后，练练手，就试着实现了只能输入数字的输入框。在之前的博客里，用jquery也实现了这样的功能，这里用vue.js来实现，把实现的过程记录下来 如果只是一个输入框，要实现就非常的简单了，输入框的内容和数据绑定，给数据加一个
-
本文向大家介绍Python PyQt5实现的简易计算器功能示例，包括了Python PyQt5实现的简易计算器功能示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了Python PyQt5实现的简易计算器功能。分享给大家供大家参考，具体如下： 这里剩下计算函数(self.calculator)未实现，有兴趣的朋友可以实现它 【知识点】 1、利用循环添加按钮部件，及给每个按钮设置信号/槽
-
本文向大家介绍vue实现简易计算器功能，包括了vue实现简易计算器功能的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了vue实现简易计算器的具体代码，供大家参考，具体内容如下 功能介绍 1、可以实现加减乘除 2、可以实现归零 3、实现退格 效果图一般般，样式随便写的，主要看功能以及实现方法 代码加解释 1、HTML部分 首先布局，把要做的样子写出来，为每一个按键绑定一个点击事件 2、
-
本文向大家介绍Java实现的简单数字时钟功能示例，包括了Java实现的简单数字时钟功能示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了Java实现的简单数字时钟功能。分享给大家供大家参考，具体如下： 应用名称：Java数字时钟 用到的知识：Java GUI编程，线程 开发环境：win8+eclipse+jdk1.8 功能说明：可以显示当前系统的年月日、星期以及准确时间，并实时更新显示。
-
本文向大家介绍PHP简单实现数字分页功能示例，包括了PHP简单实现数字分页功能示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了PHP简单实现数字分页功能。分享给大家供大家参考，具体如下： 运行效果如下图所示： 更多关于PHP相关内容感兴趣的读者可查看本站专题：《PHP+ajax技巧与应用小结》、《PHP运算与运算符用法总结》、《PHP网络编程技巧总结》、《PHP基本语法入门教程》、《p
-
本文向大家介绍angular 实现的输入框数字千分位及保留几位小数点功能示例，包括了angular 实现的输入框数字千分位及保留几位小数点功能示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了angular 实现的输入框数字千分位及保留几位小数点功能。分享给大家供大家参考，具体如下： 网上查到一个关于千分位的指令，我稍微做了点完善，通用指令代码 html代码的引用，digits传的是小数