开发项目中经常会用到，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. day06-1 与用户交互以及格式化输出

    目录 Python的与用户交互 Python2的input和raw_input(了解) 格式化输出 占位符 format函数格式化字符串 f-string格式化(方便) Python的与用户交互 in ...

  2. 路飞学城Python-Day23（practise）

    本章总结 练习题 什么是C/S架构? 互联网协议是什么?分别介绍五层协议中每一层的功能? 基于tcp协议通信,为何建立链接需要三次握手,而断开链接却需要四次挥手 为何基于tcp协议的通信比基于udp协 ...

  3. 解决MYSQL的错误：Got a packet bigger than 'max_allowed_packet' bytes

    Mysql 5.1开始遇到的信息包过大问题,当用客户端导入数据的时候,遇到错误代码: 1153 - Got apacket bigger than 'max_allowed_packet' bytes ...

  4. GitHub两种上传方式的对比----SSH / https

    https://www.jianshu.com/p/1ac06bcd8ab5 https://www.cnblogs.com/lqfxyy/p/5740720.html https://blog.cs ...

  5. 2019-03-28 Python SQL 的注释

    SQL Server 多行注释 : ctrl + k + c SQL Server 单行注释:  -- Python 单行注释:# Python多行注释:''' '''

  6. 常见的版本号及Springcloud的版本

    谈谈软件版本号的认识 一.常见版本号说明 举个瓜:2.0.3 RELEASE 2:主版本号,当功能模块有较大更新或者整体架构发生变化时,主版本号会更新 0:次版本号.次版本表示只是局部的一些变动. 2 ...

  7. java几种读写文件的方式

    java.io的几种读写文件的方式 一.java把这些不同来源和目标的数据都统一抽象为数据流. Java语言的输入输出功能是十分强大而灵活的. 在Java类库中,IO部分的内容是很庞大的,因为它涉及的 ...

  8. 2、Koa2 路由+cookie

    一.koa2 原生路由的实现 const Koa = require('koa'); const app = new Koa(); const fs = require('fs'); function ...

  9. ASP.NET-model验证

    在ASP.NET的model中,可以定义下面的这种属性,来实现前台签证字符串 RegularExpression(@"(|.*(?=.{6,})(?=.*\d)(?=.*[a-zA-Z]). ...

  10. mysql-5.7.10-winx64 安装

    安装ZIP中的EXE文件后,找到安装目录中的my-default.ini加入代码 1 2 3 4 5 6 #新设置的 [mysql] default-character-set=utf8 #新设置的 ...