Question

首先，让我说我对javascript一无所知。过去几天我一直在网上搜索一个字符计数器来添加到textarea。我终于找到了一个漂亮的小脚本（working example），除了一个问题外，效果很好。当您达到Firefox中允许的最大字符数时，将禁用整个键盘。您无法退格以缩短计数或单击中间并删除。适用于IE，Chrome和Safari，但不适用于FireFox。我的请求是，有人可以帮我修改javascript，以便在达到最大字符数时在FireFox中启用退格和删除按钮。

感谢您的帮助。

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>

Answer 1

您支持哪些浏览器？为什么你不能使用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

Answer 2

你可以试试这个：

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/

Answer 3

虽然这个脚本/ html看起来相当陈旧，你应该找到更现代的东西，但最简单的方法是修改taLimit（）函数来考虑按下的键是否可打印：

function isCharacterKey(event) {
    var charCode = event.charCode;    
    return charCode !== 0;
}

function taLimit(taObj, event) {        
    if (taObj.value.length<maxL || !isCharacterKey(event)) return true;
    return false;    
}

注意，需要修改对taLimit（）的调用以包含事件对象：

<textarea onKeyPress="return taLimit(this, event)" onKeyUp="javascript:return taCount(this,'myCounter')" name="Description" rows=7 wrap="physical" cols="40">
</textarea>

Firefox中的javascript字符计数器

3 个答案: