我们常常在前台页面做一些文本输入长度的验证,为什么呢?因为数据库字段设置了大小,如果不限制输入长度,那么写入库时就会引发字符串截断异常。今天就给大家分享一个jquery插件来解决这一问题。

 (function ($) {
$.fn.limitTextarea = function (opts) {
var defaults = {
maxNumber: , //允许输入的最大字数
position: 'top', //提示文字的位置,top:文本框上方,bottom:文本框下方
onOk: function () { }, //输入后,字数未超出时调用的函数
onOver: function () { } //输入后,字数超出时调用的函数
}
var option = $.extend(defaults, opts);
this.each(function () {
var _this = $(this);
var info = '<div id="info' + option.maxNumber + '">还可以输入<b>' + (option.maxNumber - getByteLen(_this.val())) + '</b>字符</div>';
var fn = function () {
var $info = $('#info' + option.maxNumber + '');
var extraNumber = option.maxNumber - getByteLen(_this.val()); if (extraNumber >= ) {
$info.html('还可以输入<b>' + extraNumber + '</b>个字符');
option.onOk();
} else {
$info.html('还可以输入<b>0</b>个字符');
option.onOver();
}
};
switch (option.position) {
case 'top':
_this.before(info);
break;
case 'bottom':
default:
_this.after(info);
}
//绑定输入事件监听器
if (window.addEventListener) { //先执行W3C
_this.get().addEventListener("input", fn, false);
} else {
_this.get().attachEvent("onpropertychange", fn);
}
if (window.VBArray && window.addEventListener) { //IE9
_this.get().addEventListener("onkeydown", function () {
var key = window.event.keyCode;
(key == || key == ) && fn(); //处理回退与删除
});
_this.get().addEventListener("oncut", fn); //处理粘贴
}
});
}
function getByteLen(val) {
var len = ;
for (var i = ; i < val.length; i++) {
if (val[i].match(/[^\x00-\xff]/ig) != null) //全角
len += ;
else
len += ;
}
return len;
}
function getByteVal(val, max) {
var returnValue = '';
var byteValLen = ;
for (var i = ; i < val.length; i++) {
if (val[i].match(/[^\x00-\xff]/ig) != null)
byteValLen += ;
else
byteValLen += ;
if (byteValLen > max)
break;
returnValue += val[i];
}
return returnValue;
}
})(jQuery)

48行以下,我的同事添加了两个函数,其实这么写有点奇怪,我们完全可以采用函数表达式的写法。比如:

  this.getByteLen= function(val) {
var len = ;
for (var i = ; i < val.length; i++) {
if (val[i].match(/[^\x00-\xff]/ig) != null) //全角
len += ;
else
len += ;
}
return len;
}

不过需要注意的一点是,此定义形同变量定义,要写到被调用代码之前。不过这就牵扯到了“闭包”等一系列概念,我们以后再讨论。

再看看这个插件如何使用:

  $('#Remarks').limitTextarea({
maxNumber: , //最大字数
position: 'bottom', //提示文字的位置,top:文本框上方,bottom:文本框下方
onOk: function () {
$('#Remarks').css('background-color', 'white');
}, //输入后,字数未超出时调用的函数
onOver: function () {
var value = $('#Remarks').val(); $('#Remarks').val(getByteVal(value, )); }
});

经实践,用起来还不错,特此推荐。

如上图,13个汉字,26个字节,数据库名称限制是28个字节。

js文本框字符数输入限制的更多相关文章

  1. js统计文本框剩余可输入字数

    js统计文本框剩余可输入字数 <html><head runat="server"> <title></title> <scr ...

  2. js控制文本框仅仅能输入中文、英文、数字与指定特殊符号

    JS 控制文本框仅仅能输入数字 <input onkeyup="value=value.replace(/[^0-9]/g,'')"onpaste="value=v ...

  3. [js开源组件开发]js文本框计数组件

    js文本框计数组件 先上效果图: 样式可以自行调整 ,它的功能提供文本框的实时计数,并作出对应的操作,比如现在超出了,点击下面的按钮后,文本框会闪动两下,阻止提交.具体例子可以点击demo:http: ...

  4. python开发_tkinter_获取文本框内容_给文本框添加键盘输入事件

    在之前的blog中有提到python的tkinter中的菜单操作 python开发_tkinter_窗口控件_自己制作的Python IDEL_博主推荐 python开发_tkinter_窗口控件_自 ...

  5. [HTML] 使用size和maxlength分别控制文本框宽度和输入字符数的限制

    ① size一般可以直观的看到,就是文本框的宽度,只能决定文本框的宽度,也就是可以看到的字符的个数. 如:size="5"  这意味着如果输入  我的国家是北京 那么只能看见  我 ...

  6. JS添加删除一组文本框并对输入信息加以验证

    在做项目中遇到这样一个问题,就是我们需要添加几组数据到数据库,但是具体几组数据不确定,有客户来填写,比如我们需要添加打折策略,可能个策略有很多组方案,比如“满100打5折,满200打4折,满500打3 ...

  7. JS文本框输入限制

    1上面的文本框只能输入数字代码(小数点也不能输入): CODE: <input onkeyup="this.value=this.value.replace(/\D/g,'')&quo ...

  8. js怎么限制文本框input只能输入数字

    1.说明 本篇文章介绍怎么使用js限制文本框只能输入数字 2.HTML代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1 ...

  9. js限制文本框input只能输入数字

    JS判断只能是数字和小数点. ,文本框只能输入数字代码(小数点也不能输入) 复制代码 代码示例:<input onkeyup="this.value=this.value.replac ...

随机推荐

  1. org.eclipse.swt.custom.StyledText.getScrollbarsMode()I

    错误: org.eclipse.swt.custom.StyledText.getScrollbarsMode()I 解决方法: 1 卸载,并手工清除myeclipse全部文件 2 重新安装myecl ...

  2. RabbitMQ原理

    vhosts(broker) connection 与 channel(连接与信道) exchange 与  routingkey(交换机与路由键) queue(队列) Binding(绑定) cli ...

  3. Jquery结合Ztree生成树

    尊重作者,附原文链接:http://my.oschina.net/u/2472104/blog/529055 Ztree的api http://www.ztree.me/v3/api.php Ztre ...

  4. SKPhysicsWorld类

    继承自 NSObject 符合 NSCodingNSObject(NSObject) 框架  /System/Library/Frameworks/SpriteKit.framework 可用性 可用 ...

  5. HDU1163【九余数定理】【水题】

    Eddy's digital Roots Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Oth ...

  6. jQuery 简单滑动轮播图效果

    一般页面简单轮播图效果用jQuery制作更加简单.我们来看看以下效果是如何来进行制作的. 其html结构下所示: <div id="box">         < ...

  7. hdu 1029(hash)

    传送门:Ignatius and the Princess IV 题意:给n个数,找出出现次数大于等于(n+1)/2的那个数. 分析:大水题,排个序输出中间那个即可,这里随便写个HASHMAP找出次数 ...

  8. workerman启动失败解决

    提示stream_socket_server(): unable to connect to tcp://0.0.0.0:2120 (Address already in use)php xxx.ph ...

  9. Matplotlib-画图种类

    Scatter 散点图 本节我们将讲述各种不同的plot的方式.之前我们讲到了如何plot线,今天我们讲述如何plot散点图. # 首先,先引入matplotlib.pyplot简写作plt,再引入模 ...

  10. JAVA数据结构之链表

    JAVA数据结构之链表 什么是链表呢? 链表作为最基本的数据结构之一,定义如下: 链表是一种物理存储单元上非连续.非顺序的存储结构,数据元素的逻辑顺序是通过链表中的指针链接次序实现的. 简单来说呢,链 ...