开发项目中经常会用到，textarea统计字数

源码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>wordCount字数统计</title>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<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>
<script type="text/javascript">
$(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 () {
var _value = $(this).val().replace(/\n/gi,"");
numItem.text(max - _value.length);
});
}
</script>
</head>
<body>
<div class="wordCount" id="wordCount">
<textarea placeholder="textarea还剩余字数统计"></textarea>
<span class="wordwrap"><var class="word">200</var>/200</span>
</div>
</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. 仿校内textarea输入框字数限制效果

    这是一个仿校内textarea回复消息输入框限制字数的效果,具体表现如下: 普通状态是一个输入框,当光标获取焦点时,出现字数记录和回复按钮 PS:上边那个小三角可不是用的图片. 普通状态效果如下: 获 ...

  4. jquery插件：textarea的字数提示、textBox的文字提示

    引用文件:    <script src=”/TextTip/TextTip.js” type=”text/javascript”></script> 一.textarea的字 ...

  5. Textarea输入字数限制（兼容iOS&安卓）

    最近在做一个微信公众号的页面,其中有对textarea做输入字数限制,而且需要兼容iOS和安卓手机,下面直接贴代码: <!DOCTYPE html> <html lang=" ...

  6. word2016_统计字数

    统计字数 审阅->字数统计

  7. jquery实现输入框实时统计字数和设置字数限制功能

    <html> <header> <meta charset="utf-8"> <title>测试实时字数显示</title&g ...

  8. textarea 限制字数

    $("textarea").keyup(function(){        //console.log($(this).val().length);        var L=$ ...

  9. textarea限定字数提示效果

    最近工作中要实现的一个效果是:在textarea中输入字符会提示剩余多少字符可输入.于是马不停蹄的开始查阅资料. HTML代码: <table> <colgroup> < ...

随机推荐

  1. Django中ORM之创建模型

    ORM 数据库与ORM映射关系 表名 --- 类名 字段 --- 属性 表记录 --- 类示例对象 创建表(建立模型) 模型建立如下 class Book(models.Model): title = ...

  2. css3动画机制原理和实战

    这段时间喜欢上css3动画效果了,关于这个每个人都有不同的看法,在我个人看来css3在做一些小页面的动画效果还是很好用的,一些简单的小动画要是用js的话,未免浪费. 要是做大一点的话最好js+css3 ...

  3. Java基础——Servlet

    什么是Servlet Servlet是Java Web的三大组件之一,它属于动态资源.Servlet的作用是处理请求,服务器会把接收到的请求交给Servlet来处理,在Servlet中通常需要: l  ...

  4. Sona && Little Elephant and Array && Little Elephant and Array && D-query && Powerful array && Fast Queries (莫队)

    vjudge上莫队专题 真的是要吐槽自己(自己的莫队手残写了2个bug) s=sqrt(n) 是元素的个数而不是询问的个数(之所以是sqrt(n)使得左端点每个块左端点的范围嘴都是sqrt(n)) 在 ...

  5. 我的Linux系统开始学习的过程

    Linux系统,不知大家是否了解.接触计算机不多或对计算机不感冒的人可能对其比较陌生,曾经的我也是.上大学前的我的确对Linux一无所知,那时候接触面窄,都没有听说过此名字,上了大学后,身边的人有学习 ...

  6. 将Oracle中的数据放入elasticsearch

    package com.c4c.test; import java.sql.Connection; import java.sql.DriverManager; import java.sql.Res ...

  7. 洛谷 1063 dp 区间dp

    洛谷 1063 dp 区间dp 感觉做完这道提高组T1的题之后,受到了深深的碾压,,最近各种不在状态.. 初看这道题,不难发现它具有区间可并性,即(i, j)的最大值可以由(i, k) 与 (k+1, ...

  8. Java分布式爬虫Nutch教程——导入Nutch工程，执行完整爬取

    Java分布式爬虫Nutch教程--导入Nutch工程,执行完整爬取 by briefcopy · Published 2016年4月25日 · Updated 2016年12月11日 在使用本教程之 ...

  9. WinServer-PowerShell基础

    命令的参数: [-name] 这个参数必须要有,string表示name参数接受什么样的实参,<>表示参数可以接受的实参类型,通常出现set get add都会伴随着必须参数 [-name ...

  10. (手冊)Animation 之 使用Animation View

    观看游戏物体上的动画(Viewing Animations on a GameObject) Animation View 是与 Hierarchy View.Scene View和Inspector ...