开发项目中经常会用到，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. Thingworx新建Thing的数据库表变化

    为了在Thingworx的基础上建立统一的可视化平台,并且对软件产品具有自主控制权,不依赖于Thingworx软件(防止因Thingworx的升级.Bug导致的自主扩展功能受制),所以最近在研究Thi ...

  2. Pyhton学习——Day9

    #文件操作的其他方法 ###############################################################################文件的内置操作函数# ...

  3. vue安装以及配置

    今天又重新做了一遍vue的安装步骤: 1.条件,vue需要安装在node环境里面,确保安装了node. 2.安装脚手架. 找一个文件夹,放你的项目.待会儿安装的时候,项目会在你找的这个文件下新增一个你 ...

  4. pickle模块 no attribute 'dumps'

    今天写了一个pickle.py的文件练习pickle模块,代码如下: import pickle dic = {"linga": ('football',)} dic2 = {&q ...

  5. PAT 天梯赛练习集 L2-004. 这是二叉搜索树吗？

    题目链接: https://www.patest.cn/contests/gplt/L2-004 一棵二叉搜索树可被递归地定义为具有下列性质的二叉树:对于任一结点, 其左子树中所有结点的键值小于该结点 ...

  6. BZOJ 4942 NOI2017 整数 (压位+线段树)

    题目大意:让你维护一个数x(x位数<=3*1e7),要支持加/减a*2^b,以及查询x的第i位在二进制下是0还是1 作为一道noi的题,非常考验写代码综合能力,敲+调+借鉴神犇的代码 3个多小时 ...

  7. STM32使用HAL库实现ADC单通道转换

    STM32的ADC转换还是很强大的,它具有多个通道选择,这里我就不细说,不了解的可以自行百度,这里只是选取单通道,实现ADC转换.在文章开始之前,我说一下数据左对齐跟右对齐的差别,以前一直糊里糊涂的, ...

  8. 【【henuacm2016级暑期训练】动态规划专题 H】Greenhouse Effect

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 原题意等价于:给你一个序列(实数的位置没用!)..你可以改变其中某些元素的位置(插入到某些位置中间. 然后让他变成有序的. (有序的 ...

  9. 楼宇自控-RS232\RS485\RS422

    1.rs-232-c rs-232-c是美国电子工业协会eia(electronic industry association)制定的一种串行物理接口标准.rs是英文"推荐标准"的 ...

  10. ASP.NET-入门

    MVC5特点 1.One ASP.NET统一平台  2.Bootstrap 免费CSS,响应式页面 3.路由标记属性:简单.控制器.操作.前缀.参数.URL 4.ASP.NET web API 2 : ...