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> < ...
随机推荐
- 12 个最佳 GNOME（GTK）主题
作者: Phillip Prado 译者: LCTT 郑 | 2019-04-14 09:45 评论: 1 收藏: 2 让我们来看一些漂亮的 GTK 主题,你不仅可以用在 Ubuntu 上,也可以 ...
- Pyhton学习——Day54
#Django内容回顾# -请求响应HTTP协议(有.无状态)默认传递的是字符串# 传递字符串分为两个部分:1.http1.1 GET /url /index + 请求头# Provisional h ...
- 【BZOJ3309】DZY Loves Math - 莫比乌斯反演
题意: 对于正整数n,定义$f(n)$为$n$所含质因子的最大幂指数.例如$f(1960)=f(2^3 * 5^1 * 7^2)=3$,$f(10007)=1$,$f(1)=0$. 给定正整数$a,b ...
- IOS - ImagePicker 连拍
- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingImage:(UIImage *)sel ...
- web自动化-selenium2入门讲解（mac版本）
最近要做一个selenium2的分享,于是总结了下我用selenium2的感受,希望分享出来,可以对入门的小伙伴有一点帮助,也希望得到大佬的指教 一,环境搭建maven+selenium2+tes ...
- NOIP2018提高组省一冲奖班模测训练（三）
NOIP2018提高组省一冲奖班模测训练(三) 自己按照noip的方式考,只在最后一两分钟交了一次 第一题过了,对拍拍到尾. 第二题不会.考试时往组合计数的方向想,推公式,推了一个多小时,大脑爆炸,还 ...
- COGS——T 1168. 机器调度
http://www.cogs.pro/cogs/problem/problem.php?pid=1168 ★★ 输入文件:machine.in 输出文件:machine.out 简单对比 ...
- HTML---经常使用标签总结与实践
什么是HTML? 超文本标记语言,标准通用标记语言下的一个应用. "超文本"就是指页面内能够包括图片.链接,甚至音乐.程序等非文字元素. 超文本标记语言的结构包含" ...
- 【iOS】UICollectionView自己定义Layout之蜂窝布局
网上的UICollectionView的Layout布局,其cell的形状多为矩形和圆形. 本篇博文将正六边形作为cell的基本形状,为您展现独特的蜂窝布局效果及实现源代码. 帮助您让自己的App脱颖 ...
- 对Java、C#转学swift的提醒：学习swift首先要突破心理障碍。
网上非常多都说swift是一门新手友好的语言. 但以我当年从Java转学Ruby的经验,swift对于从Java.C#转来的程序猿实际并不友好.原因就在于原来总有一种错觉:一个语言最重要的就是严谨,而 ...