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 相关文章推荐
JS实现仿百度输入框自动匹配功能的示例代码
Feb 19 Javascript
AngularJS表单编辑提交功能实例
Feb 13 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
Mar 03 Javascript
js全选按钮的实现方法
Nov 17 Javascript
vue.js入门教程之计算属性
Sep 01 Javascript
基于Phantomjs生成PDF的实现方法
Nov 07 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
Nov 18 Javascript
jQuery基于Ajax方式提交表单功能示例
Feb 10 Javascript
node使用UEditor富文本编辑器的方法实例
Jul 11 Javascript
React Native之TextInput组件解析示例
Aug 22 Javascript
详解vue-cli3 中跨域解决方案
Apr 10 Javascript
Vue 打包后相对路径的引用问题
Jun 05 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
PHP使用PHPMailer发送邮件的简单使用方法
2013/11/12 PHP
php利用curl抓取新浪微博内容示例
2014/04/27 PHP
JavaScript 设计模式 安全沙箱模式
2010/09/24 Javascript
JavaScript 字符串处理函数使用小结
2010/12/02 Javascript
javascript获取当前日期时间及其它操作函数
2011/01/11 Javascript
jquery事件与函数的使用介绍
2013/09/29 Javascript
js快速排序的实现代码
2013/12/08 Javascript
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
javascript类型转换示例
2014/04/29 Javascript
dreamweaver 8实现Jquery自动提示
2014/12/04 Javascript
JS实现图片的不间断连续滚动的简单实例
2016/06/03 Javascript
JavaScript省市区三级联动菜单效果
2016/09/21 Javascript
jQuery html表格排序插件tablesorter使用方法详解
2017/02/10 Javascript
如何使用Bootstrap创建表单
2017/03/29 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
2017/07/17 jQuery
基于JS递归函数细化认识及实用实例(推荐)
2017/08/07 Javascript
JS获取本地地址及天气的方法实例小结
2019/05/10 Javascript
JavaScript使用面向对象实现的拖拽功能详解
2019/06/12 Javascript
深度了解vue.js中hooks的相关知识
2019/06/14 Javascript
js通过canvas生成图片缩略图
2020/10/02 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
2020/10/26 Javascript
Vue 组件注册全解析
2020/12/17 Vue.js
[04:19]DOTA2亚洲邀请赛 现场花絮
2015/03/11 DOTA
[02:23]1个至宝=115个英雄特效 最“绿”至宝拉比克“魔导师密钥”登场
2018/12/29 DOTA
用Python编写一个简单的FUSE文件系统的教程
2015/04/02 Python
PyQt5每天必学之像素图控件QPixmap
2018/04/19 Python
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
奥地利票务门户网站:oeticket.com
2019/12/31 全球购物
采购员岗位职责
2013/11/15 职场文书
安全生产网格化管理实施方案
2014/03/01 职场文书
小学生安全演讲稿
2014/04/25 职场文书
委托书范本
2014/09/13 职场文书
2014年客房服务员工作总结
2014/11/18 职场文书
汤姆索亚历险记读书笔记
2015/06/29 职场文书
python flask框架快速入门
2021/05/14 Python
R9700摩机记
2022/04/05 无线电