textarea输入文字限制个数
说明:
w-count固定为数字部分的class
textarea-active为超出最大输入文字个数报错信息的class
html 部分:
<div class="wrap wrapper">
<div class="tp-form-textarea tp-form-input-unname">
<div class="textarea-box" data-textarea="textarea" data-length="20">
<textarea name="" id="" cols="5" rows="10" placeholder="默认文字" data-cols="5"></textarea>
<p class="w-count" data-length="number"><em>0</em>/30</p>
</div>
</div>
<div class="tp-form-textarea tp-form-input-unname">
<div class="textarea-box" data-textarea="textarea-1" data-length="20">
<textarea name="" id="" cols="3" rows="10" placeholder="默认文字" data-cols="3"></textarea>
<p class="w-count" data-length="number-1"><em>0</em>/302</p>
</div>
</div>
</div>
js部分:
/*
* @name tab.js tab切换功能
*/
define(function(require, exports, module) {
var TextArea = function(ele,config){
this.area = $.extend({
triggerFocus:'focus',
triggerBlur:'blur',
triggerInput:'input',
$content: '.textarea-box',
$textareaBox:"[data-textarea*='textarea']",
$wCount:"[data-length *='number']",
$value : '',
$maxlength:100
}, config);
this.init(ele);
};
TextArea.prototype = {
constructor:TextArea,
init: function(ele){
var self = this;
self.$ele = ele;
//this就是代表当前作用域对象的引用。如果在全局范围this 就代表window 对象,如果在构造函数体内,就代表当前的构造函数所声明的对象。
self.$textareaBox = $(self.area.$content || self.area.$textareaBox);
self.renderTab();
},
cssStatus:{
actives: 'textarea-active', //给聚焦的盒子添加class
warnimg: 'count-error' //给报错的盒子添加红色文字
},
renderTab:function(){
var self = this;
self.$textareaBox.find("textarea").on(self.area.triggerFocus, function(){
var that = $(this);
_parent = that.parents(".textarea-box");
_parent.addClass(self.cssStatus.actives);
}).on(self.area.triggerBlur, function(){
var _that = $(this);
self.$textareaBox.removeClass(self.cssStatus.actives);
}).on(self.area.triggerInput, function(){ //input事件是时时触发
var _this = $(this),
_parent = _this.parent(),
val = $.trim(_this.val());
wCount = _parent.find((self.area.$wCount || ".w-count")).text(); //获取文字最大数
if(wCount == '' || wCount =="undefined" || wCount == null){
maxlength = self.area.$maxlength;
}else{
var wNum = wCount.lastIndexOf("\/"),
maxlength = wCount.substring(wNum+1,wNum.length);
}
if(val.length > maxlength){
_parent.addClass(self.cssStatus.warnimg)
}else{
_parent.removeClass(self.cssStatus.warnimg)
}
_parent.find('.w-count em').text(val.length)
});
}
}
$.extend($.fn,{
textArea:function(config){
return new TextArea($(this), config || {});
}
});
module.exports = $;
})
textarea输入文字限制个数的更多相关文章
- jquery统计输入文字的个数并对其进行判断
<textarea placeholder="该产品满足你的期待吗?说说你的使用心得,分享给 同样看中的他们吧"></textarea> <span ...
- js计算textarea输入文字的长度
前言 日常开发过程中,有些时候我们想使用textarea,然后限制输入的长度,在textarea末尾显示剩余可输入的字节数. 如下图: 解决方法: 常用的有三种方法: 1.通过判断charCodeA ...
- js控制textarea输入字符串的个数,鼠标按下抬起推断输入字符数
[Html代码] <table> <tr> <td width="150">短信内容:</td> <td> <te ...
- js对输入文字个数的限制...
发表留言或者微博的时候,对输入文字个数的限制,下面分两种情况,每种分别介绍两种实现方式: 第一种:一个汉字算一位,两个字母或符号算一位. 通过ASCII编码来判断 textarea.onkeyup = ...
- inupt textarea提示文字(点击消失,不输入恢复)
<input name="textfield" type="text" maxlength="20" value="请输入 ...
- inupt textarea提示文字(点击消失,不输入恢复)及限制字数
效果: input: textarea: 限100字 源码: input: <input name="textfield" type="text" max ...
- js 控制输入文字个数(换行不算)
如题,换行符在textarea中是要当成一个字符的.用普通的maxlength属性就不行了,于是想到通过事件来控制输入文字的长度. 注意哦,回车换行不能算成字符.这样的话,普通的substring等方 ...
- JS控制文本框textarea输入字数限制
<html> <head> <title>JS限制Textarea文本域字符个数</title> <meta http-equiv="C ...
- chrome浏览器下禁制 textarea改变大小; Jquery的textareaCounter插件控制textarea输入的字符数量
给 textarea 添加一个css 样式即可 resize: none; 用Jquery的插件控制textarea输入的字符数量 一:引用Jquery脚本,并引入 textareaCounte ...
随机推荐
- python3读取excel文档数据
实现场景: 1.读取Excel表数据 2.把数据作为参数传给后面的函数 3.后面的函数循环读取参数执行操作 本案例Excel内容为下图,becks为表名 先贴代码 import xlrd #读取exc ...
- 文件上传三:base64编码上传
介绍三种上传方式: 文件上传一:伪刷新上传 文件上传二:FormData上传 文件上传三:base64编码上传 Flash的方式也玩过,现在不推荐用了. 优点: 1.浏览器可以马上展示图像,不需要先上 ...
- linux下误清用户/home下的文件怎么办?
2016-08-19 10:38:10 有时候我们不小心把home目录下的用户目录删除了,出现上图情况,每行开头直接变成-bash-3.2$这种形式而不是[lyp@centos7 ~]$这种,这时 ...
- 画布 canvas 的相关内容
1.什么是canvas canvas也被叫做画布,是在JavaScript中完成网页图像制作的一个重要的途径,画布是一个矩形区域,在这个矩形区域中你可以利用好这里的每一个像素.同样在canvas中也有 ...
- 从App.config中读取数据库连接字符串
1.首先在App.config文件中添加如下代码注意<connectionStrings>插入位置. <connectionStrings> <add name=&quo ...
- Horizontal Pod Autoscaler(Pod水平自动伸缩)
Horizontal Pod Autoscaler 根据观察到的CPU利用率(或在支持自定义指标的情况下,根据其他一些应用程序提供的指标)自动伸缩 replication controller, de ...
- Arduino系列之DHT11模块采集数据(一)
下面我将介绍DHT11模块的相关用法 DHT11数字传感器概述:是一款含有已校准数字信号输出的温湿度复合传感器 .它应用专用的数字模块采集技术和温湿度传感技术 ,确保产品具有极 高的可靠性与卓越的长期 ...
- 漏洞利用:验证绕过,XSS利用,Cookic盗用,文件上传
1. 文件上传 低级别 写好上传的内容 选择好上传的文件 上传成功. 测试:访问文件,执行代码 中级别 修改文件后缀为png 上传该文件 抓包修改文件后缀为php,然后允许数据包通过. 上传 ...
- TypeScript躬行记(6)——高级类型
本节将对TypeScript中类型的高级特性做详细讲解,包括交叉类型.类型别名.类型保护等. 一.交叉类型 交叉类型(Intersection Type)是将多个类型通过“&”符号合并成一个新 ...
- wordpress 如何防止盗链
盗链是指其它站点使用了你自己网站的图片音乐等资源,然后链接又没有更换,直接显示的就是你站点的图片,这在转载文章时最常见,比如转载时将 整篇文章都转载过去,包括文章里面的图片,有些人就懒得把图片再重新上 ...