<!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. java面试每日一题12

    题目:打印出如下图案(菱形)     *    ***  ****** ********  ******   ***    * public class Diamond { public static ...

  2. ACM题目————Anagram

    Description You are to write a program that has to generate all possible words from a given set of l ...

  3. MNIST手写数字数据库

    手写数字库很容易建立,但是总会很浪费时间.Google实验室的Corinna Cortes和纽约大学柯朗研究所的Yann LeCun建有一个手写数字数据库,训练库有60,000张手写数字图像,测试库有 ...

  4. 哈希-Gold Balanced Lineup 分类： POJ 哈希 2015-08-07 09:04 2人阅读 评论(0) 收藏

    Gold Balanced Lineup Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 13215 Accepted: 3873 ...

  5. javascript学习（一） 异常处理与简单的事件

    一:异常处理 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></ti ...

  6. 一些常用的SQL查询语句

    学习网站:http://www.w3cschool.cc/sql/sql-tutorial.html 一:查询所有表的属性 SELECT 'ALTER TABLE '+ CASE WHEN O.sch ...

  7. Oracle连接字符串C#

    Password=密码;User ID=ID;Data Source=(DESCRIPTION = (ADDRESS_LIST = (ADDRESS = (PROTOCOL = TCP)(HOST = ...

  8. sys模块的初步认识

    #!/usr/bin/python # Filename: cat.py import sys def readfile(filename): '''Print a file to the stand ...

  9. C#中八皇后问题的递归解法——N皇后

    百度测试部2015年10月份的面试题之——八皇后. 八皇后问题的介绍在此.以下是用递归思想实现八皇后-N皇后. 代码如下: using System;using System.Collections. ...

  10. Codeforces Round #372 (Div. 2) B

    Description ZS the Coder loves to read the dictionary. He thinks that a word is nice if there exists ...