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>

转载于:https://www.cnblogs.com/quxiajun/p/6478725.html

textarea统计字数相关推荐

textarea输入框实时统计字数（可统计中文，英文字数）
textarea输入框实时统计字数(可统计中文,英文字数) 效果图如下所示: html部分: <textarea name="des" id="" ro ...
textArea剩余字数统计插件
效果如: js代码: /*** textArea字数统计* * Created on : 2015-6-26, 11:49:24* Author : tom lyl010991@126.com*/ v ...
微信小程序（上传照片功能、统计字数功能）
微信小程序仿淘宝申请界面中的"申请描述" 效果图:(上传照片功能.统计字数功能) .wxml : <view class="apply-describe" ...
微信小程序textArea组件字数限制
在写小程序的过程之前,我们经常能遇到输入区域的字数限制问题,今天就来看一下如何限制textArea的字数实现效果 wxml <view class="xinxi">& ...
python统计汉字字数_Python 统计字数的思路详解
问题描述: 用 Python 实现函数 count_words(),该函数输入字符串 s 和数字 n,返回 s 中 n 个出现频率最高的单词.返回值是一个元组列表,包含出现次数最高的 n 个单词及其次 ...
php统计字数指定位置,php实现的统计字数函数定义与使用示例
本文实例讲述了php实现的统计字数函数定义与使用方法.分享给大家供大家参考,具体如下: //函数定义: function countWords($str){ echo (mb_strlen($str, ...
Latex/CTeX WinEdt7.0 连续查找替换功能 “如何统计字数”
ctrl+R 后选择替换所有,会跳出来一个对话框,让你确认每一处的相同的搜索词是否需要更换. 看图看图如图:菜单栏-搜索 --------------------------------分割线 - ...
php 判断字数,php统计字数
php统计字数最近做小说项目的统计字数刚开始用mb_strlen()来统计字数但是会把所有的html标签空格了都统计在内.下边我来分享下去除空格html标签统计字数的方法.$content = ...
怎么用python统计字数_Python统计字数的思路详解
这篇文章主要介绍了Python 统计字数的思路详解,文中还给大家提供了不借助第三方模块的解决方法,感兴趣的朋友一起看看吧问题描述: 用 Python 实现函数 count_words(),该函数输入 ...

textarea统计字数

textarea统计字数相关推荐

最新文章

热门文章