开发项目中经常会用到，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. oc与swift比较

    swift试是用语言层面的雕虫小技和oc的机制大道进行pk. 从整体上来说,oc是一个更加优秀的语言.

  2. C编译时`true' undeclared (first use in this function)

    在编译C语言时有时会遇到这样的错误提示: 'true' undeclared (first use in this function) or `false' undeclared (first use ...

  3. CSS布局总结（一）

    前言:今天是学校为期六周的实训第一天,实训课感觉很水,第一天讲的竟然是HTML...实训老师丢了一个静态页面给我们做.感觉很久没写过这种东西,突然觉得自己的基本功很渣.布局这方面感觉需要总结一下,然后 ...

  4. vue自定义组件并使用

    以下是使用自己写的一个简单的文件上传框为例 1.自定义组件结构(一个js文件,一个vue文件),最好单独放一个文件 2.upload.vue 内容 其中,action是父组件传递给子组件的参数,使用p ...

  5. 20130907.Git学习记录

    1.任何文件在Git内都只有三种状态: ①已提交(committed):已提交表示该文件已经被安全地保存在本地数据库中了: ②已修改(modified):已修改表示修改了某个文件,但还没有提交保存: ...

  6. 五大最佳开源java性能监控工具

    如果你正在寻找性能监控工具,不妨看看以下推荐的这五款开源工具,这些工具目前已经可以替代付费工具了,你可以看看是否是你的最佳选择.本文推荐的五款开源工具目前是开源社区中最受欢迎的. 1. Stagemo ...

  7. Android仿QQ ios dialog,仿QQ退出向上菜单

    Android仿QQ ios dialog,仿QQ退出向上菜单 EasyDialog两种模式 仿QQ退出向上菜单,自己定义向上菜单              github地址:https://gith ...

  8. POJ 2154

    这题的时间卡的.... 必须用欧拉来优化,而且要加素数表.最重要是,因为最后结果要/n,而数据很大,所以,必须在之前就先/n了,否则会爆数据. #include <iostream> #i ...

  9. X-射线：探索原子世界的利器

    请看下图: 上图是在现代量子力学意义上的氦(Helium)原子图像,原子像是一个黑乎乎的"小云团"(电子云包围着原子核).原子的半径大约仅仅有1埃. "埃"的符 ...

  10. caffe环境配置

    参考:http://blog.csdn.net/enjoyyl/article/details/47397505 http://blog.csdn.net/baobei0112/article/det ...