JS TextArea字符串長度限制代碼集合
更新時間：2012年10月31日 15:28:21 作者：
因為業(yè)務(wù)需求 今天做了一個textarea文本域字符串長度限制的方法，其實網(wǎng)上已經(jīng)有了很多相關(guān)的解決方案，但在輸入日語時，在IE存在BUG，我的這個版本就是針對這種情況的
復(fù)制代碼 代碼如下:
<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 //只能是數(shù)字
, lastMsgLabel:null //即時顯示可輸入個數(shù)的Input
, msg:"還可以輸入{0}個文字"
, errorMsg:"文字個數(shù)超出最大限制"
};
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>
解決輸入日語+全角時出現(xiàn)的BUG 主要是在紅線中間的代碼。
思路就是中斷日語的輸入狀態(tài)。
用如果輸入超出時能忍受彈窗的話，就用方案②,否則的話就用方案①。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了JS面向?qū)ο笾噙x框?qū)崿F(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
這篇文章主要介紹了JS+CSS實現(xiàn)Li列表隔行換色效果的方法,實例分析了js操作li節(jié)點的技巧,非常具有實用價值,需要的朋友可以參考下2015-02-02
需靈活掌握的Bootstrap預(yù)定義排版類 你精通嗎?
Bootstrap預(yù)定義排版類,做web前端開發(fā)的你精通嗎？bootstrap前端框架到底為我們預(yù)定義了那些排版的類呢？感興趣的小伙伴們可以參考一下2016-06-06
JavaScript實現(xiàn)文本目標(biāo)字符替換和一鍵全部替換
這篇文章主要介紹了JavaScript實現(xiàn)文本目標(biāo)字符替換和一鍵全部替換，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-06-06
JS基于MSClass和setInterval實現(xiàn)ajax定時采集信息并滾動顯示的方法
這篇文章主要介紹了JS基于MSClass和setInterval實現(xiàn)ajax定時采集信息并滾動顯示的方法,涉及JavaScript頁面元素定時滾動操作及ajax調(diào)用實現(xiàn)技巧,需要的朋友可以參考下2016-04-04
五步輕松實現(xiàn)JavaScript HTML時鐘效果
這篇文章主要為大家詳細(xì)介紹了五步輕松實現(xiàn)JavaScript HTML時鐘效果的代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要介紹了js回到頁面指定位置的三種方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
跟我學(xué)習(xí)javascript的循環(huán)
跟我學(xué)習(xí)javascript的循環(huán)，本文不僅針對javascript循環(huán)進(jìn)行講解，還對prototype補(bǔ)充了幾點小tips，歡迎大家閱讀。2015-11-11
很多時候為了顯示格式，需要在某一字符串不滿位的情況下進(jìn)行前補(bǔ)0操作。下面這篇文章就給大家主要介紹了javascript添加前置0(補(bǔ)零)的幾種方法,文中給出了詳細(xì)的示例代碼，需要的朋友可以參考借鑒，下面來一起看看吧。2017-01-01
解決layui數(shù)據(jù)表格Date日期格式的回顯Object的問題
今天小編就為大家分享一篇解決layui數(shù)據(jù)表格Date日期格式的回顯Object的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09