JS TextArea字符串长度限制代码集合

 更新时间:2012年10月31日 15:28:21   作者:  
因为业务需求 今天做了一个textarea文本域字符串长度限制的方法,其实网上已经有了很多相关的解决方案,但在输入日语时,在IE存在BUG,我的这个版本就是针对这种情况的
复制代码 代码如下:

<html>
<body>
<textarea id="t"></textarea>
<input type="text" id="b2" />
<script type="text/javascript">
textAreaLimit("t",{lastMsgLabel:"b2"})
function textAreaLimit(area,op){
var defaultOp = {
maxLength:10 //最大长度
, IsNumber:false //只能是数字
, lastMsgLabel:null //即时显示可输入个数的Input
, msg:"还可以输入{0}个文字"
, errorMsg:"文字个数超出最大限制"
};
var label;
if(typeof area == "string"){
area = document.getElementById(area);
}
if(!area){
return;
}
for(var i in op){
defaultOp[i] = op[i];
}
if(defaultOp.lastMsgLabel){
if(typeof defaultOp.lastMsgLabel == "string"){
label = document.getElementById(defaultOp.lastMsgLabel);
}
}
if(defaultOp.IsNumber){
area.style.imeMode="Disabled";//IE
area.onkeydown = function(){
return event.keyCode != 229;
}
}
area.onkeyup = function(){
if(defaultOp.IsNumber){
this.value = this.value.replace(/\D/g,"");//IE之外的
}
if(this.value.length > defaultOp.maxLength){
//-------------------------------------------------------------------------------
//方案①
this.disabled = "disabled";
this.value = this.value.slice(0,defaultOp.maxLength);
this.removeAttribute("disabled");
this.focus();
//方案②
//或
//alert(defaultOp.errorMsg);
//this.value = this.value.slice(0,defaultOp.maxLength);
//-------------------------------------------------------------------------------
}
if(label){
label.value = defaultOp.msg.replace(/\{0\}/,defaultOp.maxLength -this.value.length);
}
}
}
</script>
</body>
</html>

解决输入日语+全角时出现的BUG 主要是在红线中间的代码。
思路就是中断日语的输入状态。
用如果输入超出时能忍受弹窗的话,就用方案②,否则的话就用方案①。

相关文章

  • uniapp中如何修改图标和名称

    uniapp中如何修改图标和名称

    这篇文章主要给大家介绍了关于uniapp中如何修改图标和名称的相关资料,uni-app是一个使用Vue.js开发跨平台应用的前端框架,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-08-08
  • js createRange与createTextRange的一些用法实例

    js createRange与createTextRange的一些用法实例

    关于createTextRange和createRange的一些用法,脚本之家增强版。
    2010-05-05
  • 老生常谈JavaScript中的this关键字

    老生常谈JavaScript中的this关键字

    相对于很多其他的面向对象语言来说,this代表的就是当前对象。本篇文章通过实例给大家介绍js中的this关键字,感兴趣的朋友一起看看吧
    2016-10-10
  • Javascript的promise,async和await的区别详解

    Javascript的promise,async和await的区别详解

    这篇文章主要为大家详细介绍了Javascript的promise,async和await的区别,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-03-03
  • javascript判断图片是否加载完成的方法推荐

    javascript判断图片是否加载完成的方法推荐

    下面小编就为大家带来一篇javascript判断图片是否加载完成的方法推荐。小编觉得挺不错的,现在分享给大家,也给大家做个参考。
    2016-05-05
  • IE浏览器PNG图片透明效果代码

    IE浏览器PNG图片透明效果代码

    平常,我们经常使用Gif格式的图片以保持图片在浏览器中透明,以支持底色。但由于IE浏览器本身的原因,我们无法使透明的PNG图片透明起来。那么,如何将它在IE浏览器下变得透明呢?
    2008-09-09
  • JavaScript设计模式之单例模式

    JavaScript设计模式之单例模式

    单例模式的定义是:保证一个类仅有一个实例,并提供一个访问它的全局访问点。文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • javascript实现判断鼠标的状态

    javascript实现判断鼠标的状态

    这篇文章主要介绍了javascript实现判断鼠标的状态的相关代码,十分简单实用,有需要的小伙伴可以参考下。
    2015-07-07
  • JavaScript实现滑块验证码

    JavaScript实现滑块验证码

    这篇文章主要为大家详细介绍了JavaScript实现滑块验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • div层的移动及性能优化

    div层的移动及性能优化

    层的移动本来很简单,用jquery插件或者自己写一个也不难,但是最近一个ipad项目里,发现用手移动div会感觉很卡,体验很差(可能是ipad的配置根不上pc)。
    2010-11-11

最新评论