jquery判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)


Posted in Javascript onOctober 15, 2010

1. $('textarea#txtPrizeNote'); //表示textarea控件名称
2. 'span' 显示剩余字数的标签
HTML:

<div> 
<textarea id="txtPrizeNote" runat="server" height="74px" width="480px" maxlength="10" 
style="width: 480px; height: 74px; float: left"></textarea> 
<span style="color: Red;">*</span><br /> 
剩余字数:<span id="showmsg" style="color: red"></span> 
</div>

<script type="text/javascript"> 
//返回val的字节长度 
function getByteLen(val) { 
var len = 0; 
for (var i = 0; i < val.length; i++) { 
if (val[i].match(/[^\x00-\xff]/ig) != null) //全角 
len += 2; 
else 
len += 1; 
} 
return len; 
} 
//返回val在规定字节长度max内的值 
function getByteVal(val, max) { 
var returnValue = ''; 
var byteValLen = 0; 
for (var i = 0; i < val.length; i++) { 
if (val[i].match(/[^\x00-\xff]/ig) != null) 
byteValLen += 2; 
else 
byteValLen += 1; 
if (byteValLen > max) 
break; 
returnValue += val[i]; 
} 
return returnValue; 
} 
$(function() { 
var _area = $('textarea#txtPrizeNote'); 
var _info = _area.next(); 
var _max = _area.attr('maxlength'); 
var _val; 
_area.bind('keyup change', function() { //绑定keyup和change事件 
if (_info.find('span').size() < 1) {//避免每次弹起都会插入一条提示信息 
_info.append(_max); 
} 
_val = $(this).val(); 
_cur = getByteLen(_val); 
if (_cur == 0) {//当默认值长度为0时,可输入数为默认maxlength值 
_info.text(_max); 
} else if (_cur < _max) {//当默认值小于限制数时,可输入数为max-cur 
_info.text(_max - _cur); 
} else {//当默认值大于等于限制数时 
_info.text(0); 
$(this).val(getByteVal(_val,_max)); //截取指定字节长度内的值 
} 
}); 
}); 
</script>
Javascript 相关文章推荐
在textarea文本域中显示HTML代码的方法
Mar 06 Javascript
Javascript 面向对象之重载
May 04 Javascript
YUI模块开发原理详解
Nov 18 Javascript
jquery validate表单验证的基本用法入门
Jan 18 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
Jul 28 Javascript
JS匿名函数实例分析
Nov 26 Javascript
BootStrap 动态表单效果
Jun 02 Javascript
vue生命周期实例小结
Aug 15 Javascript
简单两步使用node发送qq邮件的方法
Mar 01 Javascript
vue实现下拉加载其实没那么复杂
Aug 13 Javascript
vue 组件销毁并重置的实现
Jan 13 Javascript
vue组件添加事件@click.native操作
Oct 30 Javascript
jquery 元素相对定位代码
Oct 15 #Javascript
JQuery小知识
Oct 15 #Javascript
JQuery1.4+ Ajax IE8 内存泄漏问题
Oct 15 #Javascript
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
Oct 14 #Javascript
js限制文本框为整数和货币的函数代码
Oct 13 #Javascript
javascript中&quot;/&quot;运算符常见错误
Oct 13 #Javascript
javascript一个无懈可击的实例化XMLHttpRequest的方法
Oct 13 #Javascript
You might like
图片存储与浏览一例(Linux+Apache+PHP+MySQL)
2006/10/09 PHP
laravel-admin 在列表页添加自定义按钮的例子
2019/09/30 PHP
用jquery来定位
2007/02/20 Javascript
Jquery iframe内部出滚动条
2010/02/11 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
2013/08/18 Javascript
dreamweaver 8实现Jquery自动提示
2014/12/04 Javascript
分析了一下JQuery中的extend方法实现原理
2015/02/27 Javascript
JavaScript中的Repaint和Reflow用法详解
2015/07/27 Javascript
JavaScript编程学习技巧汇总
2016/02/21 Javascript
基于javascript显示当前时间以及倒计时功能
2016/03/18 Javascript
更靠谱的H5横竖屏检测方法(js代码)
2016/09/13 Javascript
JavaScript 事件对内存和性能的影响
2017/01/22 Javascript
vue.js异步上传文件前后端实现代码
2017/08/22 Javascript
详解js的视频和音频采集
2018/08/09 Javascript
微信小程序网络层封装的实现(promise, 登录锁)
2019/05/08 Javascript
在Vue中使用Select选择器拼接label的操作
2020/10/22 Javascript
Vue实现Header渐隐渐现效果的实例代码
2020/11/05 Javascript
[02:08]2014DOTA2国际邀请赛 430专访:力争取得小组前二
2014/07/11 DOTA
python打开url并按指定块读取网页内容的方法
2015/04/29 Python
Python 类与元类的深度挖掘 I【经验】
2016/05/06 Python
Python Sqlite3以字典形式返回查询结果的实现方法
2016/10/03 Python
通过Python 接口使用OpenCV的方法
2018/04/02 Python
python的re模块使用方法详解
2019/07/26 Python
基于python及pytorch中乘法的使用详解
2019/12/27 Python
python爬虫实现获取下一页代码
2020/03/13 Python
css3实现椭圆轨迹旋转的示例代码
2018/10/29 HTML / CSS
HTML5 Canvas 旋转风车绘制
2017/08/18 HTML / CSS
MAC彩妆英国官网:M·A·C UK
2018/05/30 全球购物
DJI全球:DJI Global
2021/03/15 全球购物
什么是典型的软件三层结构?软件设计为什么要分层?软件分层有什么好处?
2012/03/14 面试题
基层干部十八大感言
2014/01/19 职场文书
大学四年个人的自我评价
2014/02/26 职场文书
毕业生求职自荐书范文
2014/03/27 职场文书
高中升旗仪式演讲稿
2014/09/09 职场文书
HR必备:销售经理聘用合同范本
2019/08/21 职场文书
muduo TcpServer模块源码分析
2022/04/26 Redis