js文本框字数限制
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>textarea还剩余字数统计</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> <h1>textarea还剩余字数统计</h1> <p>textarea还剩余字数统计,支持复制粘贴的时候统计字数</p> <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>
js文本框字数限制的更多相关文章
- 基于jQuery的计算文本框字数的代码-jquery
用户边输入计算同时进行,告诉用户还剩余多少可输入的字数,当超过规定的字数后,点击确定,会让输入框闪动 一.功能: 1.用户边输入计算同时进行,告诉用户还剩余多少可输入的字数; 2.当超过规定的字数 ...
- [js开源组件开发]js文本框计数组件
js文本框计数组件 先上效果图: 样式可以自行调整 ,它的功能提供文本框的实时计数,并作出对应的操作,比如现在超出了,点击下面的按钮后,文本框会闪动两下,阻止提交.具体例子可以点击demo:http: ...
- 修改input和textarea的placeholder的颜色,限制文本框字数输入
<style type="text/css"> textarea{ width: 400px; height:400px; resize: none; } .limit ...
- JS控制输入框和文本框字数
文本框限制字数: HTML结构: JS: $('.advert-title').each(function(){ var TXTlength = $(this).text().length; // 当 ...
- js文本框字符数输入限制
我们常常在前台页面做一些文本输入长度的验证,为什么呢?因为数据库字段设置了大小,如果不限制输入长度,那么写入库时就会引发字符串截断异常.今天就给大家分享一个jquery插件来解决这一问题. (func ...
- 记录Js 文本框验证 与 IE兼容性
最近的日常就是将测试小姐姐提交的bug进行修改,想来这种事情还是比较好开展的,毕竟此项目已上线一年多,现在只是一些前端的问题需要改正.实际上手的时候并不是这样,原项目是在谷歌上运行,后来由于要新增一个 ...
- [JS] 文本框判断输入的内容是否为数字
可以通过触发文本框的onchange事件来对输入的内容进行判断是否为数字 文本框的属性设置: 把onchange的属性对应的js函数写好即可 参数传输的是当前控件的value值,即text值 < ...
- js文本框验证
1.文本框只能输入数字代码(小数点也不能输入) <input onkeyup="this.value=this.value.replace(/\D/g,'')" onafte ...
- JS文本框获取焦点
所谓焦点,就是鼠标移上文本框的时候那个一闪一闪的光标.
随机推荐
- pycharm的版本问题
1.分类: 专业版是收费的 Professional 教育版是免费 edu https://www.jetbrains.com/pycharm-edu/whatsnew/ 社区版是免费的 Free C ...
- TX大手笔做业务必然失败的原因
首先说一个伪命题: 物体会向下落这是一个基本的定律,一个小小的物理规则会覆盖所有物体的行为准则. 那么,当地球上的所有东西都下落的时候,你指望整个地球,月球,太阳也会下落么? 事实上大家都知道星球在宇 ...
- 【BZOJ3328】PYXFIB 数论+矩阵乘法
[BZOJ3328]PYXFIB Description Input 第一行一个正整数,表示数据组数据 ,接下来T行每行三个正整数N,K,P Output T行,每行输出一个整数,表示结果 Sampl ...
- 【BZOJ1187】[HNOI2007]神奇游乐园 插头DP
[BZOJ1187][HNOI2007]神奇游乐园 Description 经历了一段艰辛的旅程后,主人公小P乘坐飞艇返回.在返回的途中,小P发现在漫无边际的沙漠中,有一块狭长的绿地特别显眼.往下仔细 ...
- iOS interface适配
- vue--获取监听获取radius的改变
做一个考试系统,单选题都是后台来的数据,所以一时间没有想到 @change这个方法: <template> <div id="Home"> <v-he ...
- jQuery将时间转化为时间戳或将时间戳转化为时间
下面的这段代码,是可以将时间戳转为时间,或者将时间戳转为时间: <script type="text/javascript"> $.extend({ myTime:{ ...
- 算法学习之冒泡排序的C实现
冒泡排序是属于比较类的排序方式,简单易懂,但是效率不是很高,不及快排. #include "stdio.h" #include "time.h" void bu ...
- pandas 数据类型转换
数据处理过程的数据类型 当利用pandas进行数据处理的时候,经常会遇到数据类型的问题,当拿到数据的时候,首先需要确定拿到的是正确类型的数据,一般通过数据类型的转化,这篇文章就介绍pandas里面的数 ...
- PyQT5初学(一)
PyQt5 是Digia的一套Qt5与python绑定的应用框架,同时支持2.x和3.x.本教程使用的是3.x.Qt库由Riverbank Computing开发,是最强大的GUI库之一 ,官方网站: ...