开发项目中经常会用到，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. Imperative programming

    In computer science, imperative programming is a programming paradigm that uses statements that chan ...

  2. CorelDRAW设计制作超漂亮的3D立体字效果实例教程

    第一.打上招聘两个字,选择一个喜欢的字体,如下. 第二.把字体转曲,等待下一步编辑曲线做好准备,如下. 第三.选择形状工具,编辑字体形状,根据自己需要可任意编辑,如下. 第四.适当画一些装饰素材,比如 ...

  3. JQuery选择器排除某元素实现js代码

    使用JQuery选择器实现排除某一大元素下的某一元素的核心代码是使用.not()方法,如下所示: $("button").not("#save").attr(& ...

  4. Codeforces Round #493 (Div. 2) B. Cutting 前缀和优化_动归水题

    不解释,题目过水 Code: #include<cstdio> #include<cmath> #include<algorithm> using namespac ...

  5. 全球NTP服务器列表

    全球- pool.ntp.org 欧洲- europe.pool.ntp.org 亚洲- asia.pool.ntp.org 大洋洲- oceania.pool.ntp.org 北美- north-a ...

  6. shell脚本杀死某个服务的进程

    摘抄如下: 新建sh结尾的文件内容如下: NAME=$1echo $NAMEID=`ps -ef | grep "$NAME" | grep -v "$0" | ...

  7. 使用tf.ConfigProto()配置Session运行参数和GPU设备指定

    参考链接:https://blog.csdn.net/dcrmg/article/details/79091941 tf.ConfigProto()函数用在创建session的时候,用来对sessio ...

  8. markdown图片设置

    工具:typora 1. 设置图片大小(本节引用自 https://support.typora.io/Resize-Image/) Typora允许使用<img>标签显示图像,也可用于调 ...

  9. 2019-03-20 Python爬取需要登录的有验证码的网站

    当你向验证码发起请求的时候,就有session了,记录下这次session 因为每当你请求一次验证码 或者 请求一次登录首页,验证码都在变动 验证码的链接可能不是固定的,可能需要GET/POST请求, ...

  10. dubbo 部分 配置的关系-dubbo github 官方案例

    1.dubbo 有一个 dubbo.properties 作为默认配置 默认配置可以在不添加新的配置的前提下使用dubbo dubbo.properties 的内容(来自 https://github ...