0

首先，让我说我对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>
4

3 回答 3

0

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

于 2013-07-12T19:28:15.230 回答
0

你可以试试这个：

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/

于 2013-07-12T19:29:35.603 回答
0

虽然这个脚本/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>
于 2013-07-12T20:06:34.207 回答