textarea还剩余字数统计
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>textarea还剩余字数统计 - 懒人建站 http://www.51xuediannao.com/</title>
<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>
</head>
<body>
<div class="wordCount" id="wordCount">
<textarea placeholder="textarea还剩余字数统计"></textarea>
<span class="wordwrap"><var class="word">200</var>/200</span>
</div>
<span id="clock"></span>
<script src="http://lib.sinaapp.com/js/jquery/1.10.2/jquery-1.10.2.min.js"></script>
<script>
$(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 () {
numItem.text(max - $(this).val().length);
});
}
</script>
</body>
</html>
textarea还剩余字数统计相关推荐
- textArea剩余字数统计插件
效果如: js代码: /*** textArea字数统计* * Created on : 2015-6-26, 11:49:24* Author : tom lyl010991@126.com*/ v ...
- element ui textarea实现输入字数统计
背景 最近看同行设计,input textarea如果限制字符,可以展示已输入多少个字符,总共限制多少个字符.觉得这个设计挺好,看了一下element官方文档,也可以这么实现. 具体实现 maxlen ...
- 文本框输入还剩多少字数统计代码
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- html右下角的字数计算,JavaScript_用JS剩余字数计算的代码,先看看HTML代码: textarea name - phpStudy...
用JS剩余字数计算的代码 先看看HTML代码: 文字最大长度: 250. 还剩: 250. 可以看出onkeyup是当用户离开键盘后触发的事件,传递的参数是this(也就是当前所在的文档区域) 然后结 ...
- textarea输入框限制字数(JS)
第一种: <textarea οnkeyup="checkLen(this)"></textarea> <div>您还可以输入 <span ...
- 实现textarea限制输入字数
2019独角兽企业重金招聘Python工程师标准>>> textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到.与单行文本框text控件不同, ...
- 前端中文输入法对剩余字数计算的影响
背景 前端开发中往往有如下需求限制前端文本框(textfield,input,textarea,div)等的输入字数,可以参考新浪微博.但是这里有个问题,当我们使用中文输入法的时候,我们输入zhesh ...
- texearea 限制字数_实现textarea限制输入字数
实现textarea限制输入字数(包含中文只能输入10个,全ASCII码能够输入20个) textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到.与单行文本框t ...
- php js显示文字个数,JS实现字数统计的功能
现在流行的Twitter等微博客网站,有一个很好的用户体验,就是在文本框中输入文字的时候,会自动统计输入的字符,并显示用户还能输入的字符,在限制了140个字的微博客中,这样的小提示可以很好的增强用户体 ...
最新文章
- 7.5 TableLayout布局详解
- 第九章、文件与文件系统的压缩与打包 3. 打包命令: tar
- JetBrains产品永久破解
- svm手写数字识别_KNN 算法实战篇如何识别手写数字
- 整活插件 炉石传说_炉石传说:一顿操作猛如虎,定睛一看原地杵,会长整活被死人抬走...
- 解析:IEEE批准首个联邦机器学习框架标准
- 火灾自动报警系统及消防设施联动控制
- 非常好用的轮播图插件
- 第44课 角谷猜想 动动脑 第2题 阅读程序写结果
- EasyUI 添加一行的时候 行号出现负数的解决方案
- Java NIO之缓冲区Buffer
- Linux的程序安装和包管理
- 元进Python(3)---如何实现IP子网掩码计算器功能?
- 自然语言处理结合金融专业应用,主要在于资料搜集和处理。
- 几招最有效的防辐射的方法
- java网关详解_一篇让你彻底理解网关是什么的文章
- python用cartopy包画地图_python绘制地图的利器Cartopy使用说明
- 基于 SSM 的 CRM 客户管理系统
- 洛谷 P2530 [SHOI2001] 化工厂装箱员
- 100以内加减法练习题,打印到A4纸
热门文章
- 基于XMPP协议的Android即时通信系
- mySql学习笔记:比sql server书写要简单
- 妙用VM的“远程显示”功能
- [导入]获取表单所有元素的类型或者属性或者是value
- “2007中国软件技术英雄会”之微软中国研发集团开放日
- MySQL常用命令用法总结
- 直接拿来用!超实用的Java数组技巧攻略
- XXX管理平台系统——项目总结(over)
- 人工智能助力 上海科委咨询服务用机器人技术
- Weka算法Classifier-tree-J48源代码分析(一个)基本数据结构和算法