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 相关文章推荐
JavaScript让IE浏览器event对象符合W3C DOM标准
Nov 24 Javascript
jquery ajax,ashx,json的用法总结
Feb 12 Javascript
Node.js模拟浏览器文件上传示例
Mar 26 Javascript
Javascript正则控制文本框只能输入整数或浮点数
Sep 02 Javascript
Knockout自定义绑定创建方法
Dec 26 Javascript
jQuery增加与删除table列的方法
Mar 01 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
Aug 15 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
Aug 17 Javascript
JavaScript定义函数的三种实现方法
Sep 23 Javascript
JS中offset和匀速动画详解
Feb 06 Javascript
vue基于viewer实现的图片查看器功能
Apr 12 Javascript
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
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
我的论坛源代码(四)
2006/10/09 PHP
php实现Session存储到Redis
2015/11/11 PHP
PHP文件上传问题汇总(文件大小检测、大文件上传处理)
2015/12/24 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
解释&amp;&amp;和||在javascript中的另类用法
2014/07/28 Javascript
不同编码的页面表单数据乱码问题解决方法
2015/02/15 Javascript
原生js实现类似弹窗抖动效果
2015/04/02 Javascript
浅谈javascript属性onresize
2015/04/20 Javascript
全面解析Bootstrap表单使用方法(表单控件)
2015/11/24 Javascript
javascript设计模式Constructor(构造器)模式
2016/08/19 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
2016/11/03 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
2017/09/03 Javascript
IntelliJ IDEA 安装vue开发插件的方法
2017/11/21 Javascript
微信小程序左右滑动的实现代码
2017/12/15 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
2018/03/26 Javascript
利用jquery和BootStrap实现动态滚动条效果
2018/12/03 jQuery
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
2019/03/19 Javascript
vue-cli3中vue.config.js配置教程详解
2019/05/29 Javascript
使用React代码动态生成栅格布局的方法
2020/05/24 Javascript
vue3.0 上手体验
2020/09/21 Javascript
用JavaScript实现贪吃蛇游戏
2020/10/23 Javascript
[02:10]2018DOTA2亚洲邀请赛赛前采访-Liquid
2018/04/03 DOTA
Python爬豆瓣电影实例
2018/02/23 Python
python 爬取学信网登录页面的例子
2019/08/13 Python
python-numpy-指数分布实例详解
2019/12/07 Python
python全局变量引用与修改过程解析
2020/01/07 Python
html5跨域通讯之postMessage的用法总结
2013/11/07 HTML / CSS
利用HTML5 Canvas API绘制矩形的超级攻略
2016/03/21 HTML / CSS
Shell编程面试题
2016/05/29 面试题
经典安踏广告词
2014/03/21 职场文书
我的中国梦演讲稿300字
2014/08/19 职场文书
写给纪委的违纪检讨书
2015/05/05 职场文书
Html分层的box-shadow效果的示例代码
2021/03/30 HTML / CSS
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python
Python 快速验证代理IP是否有效的方法实现
2021/07/15 Python
Python 阶乘详解
2021/10/05 Python