在Firefox中的JavaScript字符計數器

首先，讓我說我對JavaScript一無所知。過去幾天我一直在網上搜索一個字符計數器以添加到textarea。我終於找到一個漂亮的小腳本（working example），除了一個問題外，它的效果很好。當您達到Firefox允許的最大字符數時，整個鍵盤都將被禁用。您不能退格以縮短計數或在中間點擊並刪除。在IE，Chrome和Safari中運行良好，但不在FireFox中運行。我的要求是，有人可以幫助我改變JavaScript，以便在達到最大字符數時在FireFox中啓用退格鍵和刪除鍵。在Firefox中的JavaScript字符計數器

感謝您的幫助。

JavaScript代碼

<script language = "Javascript"> 

maxL=255; 
var bName = navigator.appName; 
function taLimit(taObj) { 
    if (taObj.value.length==maxL) return false; 
    return true; 
} 

function taCount(taObj,Cnt) { 
    objCnt=createObject(Cnt); 
    objVal=taObj.value; 
    if (objVal.length>maxL) objVal=objVal.substring(0,maxL); 
    if (objCnt) { 
     if(bName == "Netscape"){  
      objCnt.textContent=maxL-objVal.length;} 
     else{objCnt.innerText=maxL-objVal.length;} 
    } 
    return true; 
} 

function createObject(objId) { 
    if (document.getElementById) return document.getElementById(objId); 
    else if (document.layers) return eval("document." + objId); 
    else if (document.all) return eval("document.all." + objId); 
    else return eval("document." + objId); 
} 
</script>

HTML代碼

<font> Maximum Number of characters for this text box is 255.<br> 
<textarea onKeyPress="return taLimit(this)" onKeyUp="return taCount(this,'myCounter')" name="Description" rows=7 wrap="physical" cols=40> 
</textarea> 
<br><br> 
You have <B><SPAN id=myCounter>255</SPAN></B> characters remaining for your description...</font>

來源

2013-07-12 user2577468

我建議在達到限制後保存內容，如果下一個輸入增加了大小（使文本無效），則將其替換爲保存的版本。 – RyanS

好問題，但我建議選擇另一個腳本。你在這裏得到的東西值得從21世紀初起被記住。 –

使用'

哪些瀏覽器支持你？爲什麼不能使用maxlength屬性而不是javascript？那麼你只需要一個函數，會說var charsLeft = $(this).attr("maxlength")-$(this).val().length;並把它放在你的myCounter跨度？這是新的HTML 5，但在大多數新的瀏覽器（不是Opera）

<font> Maximum Number of characters for this text box is 255.<br> 
<textarea onKeyUp="countCharsLeft(this)" onKeyPress="countCharsLeft(this)" name="Description" rows=7 wrap="physical" cols=40 maxlength="255"> 
</textarea> 
<br><br> 
You have <B><SPAN id="myCounter">255</SPAN></B> characters remaining for your description... </font>

仍然支持使用Javascript

function countCharsLeft(element){ 
    var curCharCount = element.value.length; 
    var maxLength = element.getAttribute("maxlength"); 
    document.getElementById("myCounter").innerHTML = maxLength-curCharCount; 
}

JSFiddle Demo

來源

2013-07-12 19:28:15 Legion

每次用戶寫入角色時，調用'document.getElementById'都很昂貴。你應該考慮把它緩存在一個變量中。 – Oriol

試過這也得到了同樣的結果。由於某些原因，該計數器在FireFox中不起作用。這是一個.ascx控件，它作爲一個模塊嵌入到DotNetNuke中。我不知道這是否與它有關。 – user2577468

您使用的是什麼版本的FireFox？我只是測試了FireFox中的小提琴演示，它工作得很好......（我在版本21和22中測試過） – Legion

你可以試試這個：

HTML：

<p>Maximum Number of characters for this text box is 255.</p> 
<textarea data-counter="myCounter" id="Description" rows="7" wrap="physical" cols="40" maxlength="255"> 
</textarea> 
<p>You have <b><span id="myCounter">255</span></b> characters remaining for your description...</p>

個JS：

var txtArea = document.getElementById('Description'); 
txtArea.counter = document.getElementById(txtArea.getAttribute('data-counter')); 
txtArea.onkeyup = txtArea.onchange = txtArea.oninput = taLimit; 

function taLimit() { 
    var maxL = this.getAttribute('maxlength'); 
    if (this.value.length>=maxL){ 
     this.value = this.value.substring(0, maxL); 
    } 
    this.counter.innerHTML = maxL-this.value.length; 
}

DEMO：http://jsfiddle.net/3MueW/2/

來源

2013-07-12 19:29:35 Oriol

我厭倦了這一點，並且出於某種原因，該計數器在FireFox中不起作用。這是一個.ascx控件，它作爲一個模塊嵌入到DotNetNuke中。我不知道這是否與它有關。我能夠在FireFox中工作的唯一例子是我在上面發佈的那個例子，它只能用於一半。 – user2577468

@ user2577468對我來說，它適用於Firefox 25，我不知道DotNetNuke和.ascx是什麼。你可以用控制檯試試它，併發布錯誤？ – Oriol

我在FireFox 22.它沒有給出錯誤，代碼正確執行，只是在達到最大值時鎖定整個鍵盤。 – user2577468

相關問題