<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>textarea还剩余字数统计 - 懒人建站 http://www.51xuediannao.com/</title>
<style type="text/css">
body,a{ font-size: 14px; color: #555;;}
.wordCount{ position:relative;width: 600px; }
.wordCount textarea{ width: 100%; height: 100px;}
.wordCount .wordwrap{ position:absolute; right: 6px; bottom: 6px;}
.wordCount .word{ color: red; padding: 0 4px;;}
</style>
</head>
<body>
<div class="wordCount" id="wordCount">
<textarea placeholder="textarea还剩余字数统计"></textarea>
<span class="wordwrap"><var class="word">200</var>/200</span>
</div>

<span id="clock"></span>
<script src="http://lib.sinaapp.com/js/jquery/1.10.2/jquery-1.10.2.min.js"></script>
<script>
$(function(){

//先选出 textarea 和 统计字数 dom 节点
var wordCount = $("#wordCount"),
textArea = wordCount.find("textarea"),
word = wordCount.find(".word");
//调用
statInputNum(textArea,word);

});
/*
* 剩余字数统计
* 注意 最大字数只需要在放数字的节点哪里直接写好即可 如：<var class="word">200</var>
*/
function statInputNum(textArea,numItem) {
var max = numItem.text(),
curLength;
textArea[0].setAttribute("maxlength", max);
curLength = textArea.val().length;
numItem.text(max - curLength);
textArea.on('input propertychange', function () {
numItem.text(max - $(this).val().length);
});
}
</script>
</body>
</html>

textarea还剩余字数统计的更多相关文章

  1. textarea还剩余字数统计，支持复制粘贴的时候统计字数

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. js 实现textarea剩余字数统计

    1 针对textarea剩余字数统计 2 <div class="fankui-textarea"> 3 <span>留言:</span> &l ...

  3. 使用JQ实现统计剩余字数

    JQ实现统计文本框剩余字数 效果图: 代码如下,复制即可使用: <html lang="en"> <head> <meta charset=" ...

  4. 如何实现textarea中获取动态剩余字数的实现

    工作中遇到一个案例,之前没有写过,今儿啃了半个下午硬是给写出来,灰常又成就感!当然对于js大牛来说这根本不算啥,但是对于我自己的js能力又向前迈出一小步. 案例介绍:我们常见到有的网站有textare ...

  5. 文本域textarea显示输入剩余字数

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. textarea标签提示录入剩余字数

    textarea标签提示录入剩余字数 <textarea onkeydown="checkMaxInput(this,300)" onkeyup="checkMax ...

  7. JS实现动态提示文本框可输入剩余字数(类似发表微博数字提示)

    一.实现效果: 为了更直观的体现用户在文本框输入文本时能看到自己输入了多少字,项目中需要通过判断提示文本框剩余可输入字数. html & JS: <div> <textare ...

  8. 类似新浪 腾讯微博字数统计 控制js（区分中英文 符号）

    <script> ; function Q(s) { return document.getElementById(s); } function checkWord(c) { len = ...

  9. 实现textarea限制输入字数（包含中文只能输入10个，全ASCII码能够输入20个）

    document.getElementById("<%=textBox1.ClientID %>").value 实现textarea限制输入字数(包含中文只能输入10 ...

随机推荐

  1. Shell—学习之心得

    由于项目要招聘需要有经验shell开发人员(awk编程),而作为技术面试官(暂时)的我对shell编程不太熟:当然以前也写过一些shell脚本来满足项目的需求—备份环境,数据库(逻辑).假如只是针对a ...

  2. javascript对象（1）

    Array对象 创建语法:new Array();new Array(size);new Array(element0,element,element3,……,elementn); 具有的属性:con ...

  3. ant-环境变量

    ant是绿色免安装的,通常习惯放在C盘根目录下,如:C:\apache-ant-1.9.4 那么环境就应该配置为: ANT_HOME=C:\apache-ant-1.9.4(注意:这里不需要加分号)P ...

  4. 【图像处理】ISP 图像传感器camera原理

    1.Color Filter Array — CFA 随着数码相机.手机的普及,CCD/CMOS 图像传感器近年来得到广泛的关注和应用. 图像传感器一般都采用一定的模式来采集图像数据,常用的有 BGR ...

  5. java交换两个数字位置

    第一种:在main输出,通过反射实现 1 public static void main(String[] args) throws Exception { Integer a = 1; Intege ...

  6. ArrayList,Vector,HashMap,HashSet,HashTable之间的区别与联系

    在编写java程序中,我们最常用的除了八种基本数据类型,String对象外还有一个集合类,在我们的的程序中到处充斥着集合类的身影!java中集合大家族的成员实在是太丰富了,有常用的ArrayList. ...

  7. Jenkins构建Git manager服务器的源码

    1,下载scm manager 源码库管理,下载后解压即可: 2,运行bin目录下的scm-server.bat文件,启动服务: 3,建议将scm-server放在git客户端的安装目录下,方便管理 ...

  8. bouncy castle的配置

    Bouncy Castle 是一种用于 Java 平台的开放源码的轻量级密码术包.它支持大量的密码术算法,并提供 JCE 1.2.1 的实现.因为 Bouncy Castle 被设计成轻量级的,所以从 ...

  9. BZOJ 1822 Frozen Nova 冷冻波（最大流）

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=1822 题意:WJJ喜欢“魔兽争霸”这个游戏.在 游戏中,巫妖是一种强大的英雄,它的技能F ...

  10. 动态加载JS

    <script> Date.prototype.format = function(format) { var o = { , //month "d+" : this. ...