textarea统计字数
开发项目中经常会用到，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统计字数的更多相关文章
- textarea还剩余字数统计，支持复制粘贴的时候统计字数
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- js 实现textarea剩余字数统计
1 针对textarea剩余字数统计 2 <div class="fankui-textarea"> 3 <span>留言:</span> &l ...
- 仿校内textarea输入框字数限制效果
这是一个仿校内textarea回复消息输入框限制字数的效果,具体表现如下: 普通状态是一个输入框,当光标获取焦点时,出现字数记录和回复按钮 PS:上边那个小三角可不是用的图片. 普通状态效果如下: 获 ...
- jquery插件：textarea的字数提示、textBox的文字提示
引用文件: <script src=”/TextTip/TextTip.js” type=”text/javascript”></script> 一.textarea的字 ...
- Textarea输入字数限制（兼容iOS&安卓）
最近在做一个微信公众号的页面,其中有对textarea做输入字数限制,而且需要兼容iOS和安卓手机,下面直接贴代码: <!DOCTYPE html> <html lang=" ...
- word2016_统计字数
统计字数 审阅->字数统计
- jquery实现输入框实时统计字数和设置字数限制功能
<html> <header> <meta charset="utf-8"> <title>测试实时字数显示</title&g ...
- textarea 限制字数
$("textarea").keyup(function(){ //console.log($(this).val().length); var L=$ ...
- textarea限定字数提示效果
最近工作中要实现的一个效果是:在textarea中输入字符会提示剩余多少字符可输入.于是马不停蹄的开始查阅资料. HTML代码: <table> <colgroup> < ...
随机推荐
- Appstore排名前十的程序员应用软件
程序员又名程序猿,苦逼劳累的代名词,曾经一个朋友这么开玩笑说,如果你是富二代,你当程序员就是脑残,如果你是穷二代,当程序员的话,死的时候一定是趴键盘. 程序员 哦,可怜的程序员.在那山的这边海的那边有 ...
- Python内置数据结构之字典dict
1. 字典 字典是Python中唯一的内置映射类型,其中的值不按顺序排列,而是存储在键下.键可能是数(整数索引).字符串或元组.字典(日常生活中的字典和Python字典)旨在让你能够轻松地找到特定的单 ...
- 如何让select中的滚动条自动定位到框中选中项的位置
document.getElementById("hidScrollTop").value = document.getElementById("slcYZYongFa& ...
- Android开发进度07
1,今日:目标:完成记账功能 2,昨天:账单的增删改查方法 3,收获:无 4,问题:SQLite表单出现问题,提交后软件直接退出
- 排序代码(python，c++) 及 基本算法复杂度
0.导语 本节为手撕代码系列之第一弹,主要来手撕排序算法,主要包括以下几大排序算法: 直接插入排序 冒泡排序 选择排序 快速排序 希尔排序 堆排序 归并排序 1.直接插入排序 [算法思想] 每一步将一 ...
- openvswith Frequently Asked Questions
Open vSwitch <http://openvswitch.org> 参考地址:http://git.openvswitch.org/cgi-bin/gitweb.cgi?p=ope ...
- ASP.NET-后台cookie与前台JQUERY解析cookie
在controller中给cookie赋值 HttpCookie cookie =newHttpCookie("pageInfo"); cookie["page_inde ...
- CURL库的宏定义列表
列表CURL库一共同拥有17个函数 curl_close:关闭CURL会话 curl_copy_handle:复制一个CURL会话句柄,同一时候3复制其全部參数 curl_errno:返回最后一个错误 ...
- C++实现页码数字统计
#include<iostream> #include<iomanip> #include<cstdlib> #include<ctime> #incl ...
- UIScrollView加入控件，控件距离顶部始终有间距的问题
今天.特别郁闷.自己定义了一个UIScrollView,然后在它里面加入控件,如UIButton *button = [[UIButton alloc] initWithFrame:CGRectMak ...