firefox中的javascript字符计数器

javascript character counter in firefox

本文关键字：计数器 字符 javascript 中的 firefox      更新时间：2023-09-26

首先，让我说我对javascript一无所知。最近几天我一直在网上搜索，想找到一个字符计数器来添加到文本区域。我终于找到了一个漂亮的小脚本（工作示例），除了一个问题外，它工作得很好。当您达到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>

虽然这个脚本.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>

你可以试试这个：

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;
}

演示：http://jsfiddle.net/3MueW/2/

您支持哪些浏览器？为什么不能只使用maxlength属性而不使用javascript？那么你只需要一个函数，它会说var charsLeft = $(this).attr("maxlength")-$(this).val().length;，并把它放在你的myCounter跨度中？它是HTML5的新版本，但在大多数新浏览器（不是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演示

相关文章：