<!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. 微信支付 APP 支付方式的服务器端处理程序

    对于微信的APP的支付,客户服务说只能通过微信开放平台申请.后来在公众帐号确实发现了证据:  微信支付在申请的时候就比较严(麻烦),对服务类的一些支付,本来商品就是虚拟的,所以需要将商品描述的比较详细 ...

  2. source insight项目文件列表固定嵌入右侧

    项目文件列表悬浮出来,不是嵌入紧靠右边,先将该窗口最小化,然后往右拖放,就成功固定嵌入到右边了.

  3. javascript事件处理解析

    一.什么是事件!(w3c解释) 事件是可以被 JavaScript 侦测到的行为. JavaScript 使我们有能力创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素 ...

  4. 敌兵布阵(线段树HDU 1166)

    敌兵布阵 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submissi ...

  5. mongoDB Replica集群配置（1主+1从+1仲裁）

    1.mongoDB节点介绍 主节点(Primary) 在复制集中,主节点是唯一能够接收写请求的节点.MongoDB在主节点进行写操作,并将这些操作记录到主节点的oplog中.而从节点将会从oplog复 ...

  6. 最长递增子序列LIS再谈

    DP模型: d(i) 以第 i 个元素结尾的最长递增子序列的长度. 那么就有 d(i) = max(d(j)) + 1;(j<i&&a[j]<a[i]),答案 max(d( ...

  7. offsetHeight 正则表达式验证格式

    获取Div 的height width等属性 <%@ Page Language="C#" AutoEventWireup="true" CodeFile ...

  8. linux系统中如何查看日志 (常用命令2)

    cat tail -f 日 志 文 件 说 明 /var/log/message 系统启动后的信息和错误日志,是Red Hat Linux中最常用的日志之一 /var/log/secure 与安全相关 ...

  9. Android-activity-intent

    package com.hanqi.myapplication; import android.content.ComponentName; import android.content.Intent ...

  10. iOS深入学习（UITableView系列2：reloadData）

    接着前一篇的博客来深入学习UITableView, UITableView的数据源是NSMutableArray的对象_infoArray,现在数组的内容为{@"Zero",@&q ...