2013-07-12 3 views
0

먼저, 내가 자바 스크립트에 대해 아무것도 모른다고 해봅시다. 지난 몇 일 동안 웹에서 문자 카운터를 찾아 텍스트 영역에 추가했습니다. 마침내 한 가지 문제를 제외하고는 멋진 작은 스크립트 (working example)를 발견했습니다. Firefox에서 허용되는 최대 문자 수에 도달하면 전체 키보드가 비활성화됩니다. 백 스페이스로 수를 줄이거 나 중간을 클릭하고 삭제할 수 없습니다. IE, Chrome 및 Safari에서는 제대로 작동하지만 FireFox에서는 작동하지 않습니다. 내 요청은 자바 스크립트를 변경하는 데 도움이 될 수 있도록 최대 문자 수에 도달하면 FireFox에서 백 스페이스 및 삭제 버튼을 사용할 수 있도록 설정할 수 있습니다.파이어 폭스에서 자바 스크립트 문자 카운터

모든 도움에 감사드립니다.

자바 스크립트 코드는 지원하는 브라우저

<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> 
+0

한계에 도달 한 후 내용을 저장하고 다음 입력이 크기를 늘리면 (텍스트를 무효로하는 경우) 내용을 저장 한 다음 저장 한 버전으로 바꾸는 것이 좋습니다. – RyanS

+1

좋은 질문이지만 다른 스크립트를 선택하는 것이 좋습니다. 여기서 얻은 것은 2000 년대 초반의 것으로 기억 될 가치가 있습니다. –

+0

'

0

<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 코드? 왜 그냥 자바 스크립트 대신 maxlength 속성을 사용할 수 있습니까? 그러면 var charsLeft = $(this).attr("maxlength")-$(this).val().length;라고 쓰여지고 myCounter 길이의 함수가 필요합니다. 그것은 HTML 5에 새로운하지만 여전히 대부분의 새로운 브라우저 (하지 오페라)

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

에서 자바 스크립트

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

을 지원 JSFiddle Demo

+0

사용자가 문자를 쓸 때마다'document.getElementById'를 호출하면 값 비쌉니다. 변수에서 캐싱을 고려해야합니다. – Oriol

+0

시도해 보니 동일한 결과가 나타납니다. 어떤 이유로 FireFox에서 카운터가 작동하지 않습니다. 이것은 DotNetNuke에 모듈로 포함 된 .ascx 컨트롤에 있습니다. 그것이 그 일과 관련이 있는지 없는지 나는 모른다. – user2577468

+0

어떤 FireFox 버전을 사용하고 있습니까? 난 그냥 파이어 폭스에서 바이올린 데모를 테스트하고 잘 작동 ... (버전 21 및 22에서 테스트) – Legion

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

DEMO :이 스크립트/HTML 오히려 오래된 모양과 당신이 정말로 뭔가 좀 더 현대적인 발견해야하지만 http://jsfiddle.net/3MueW/2/

+0

나는 피곤했는데 어떤 이유로 카운터가 FireFox에서 작동하지 않습니다. 이것은 DotNetNuke에 모듈로 포함 된 .ascx 컨트롤에 있습니다. 그것이 그 일과 관련이 있는지 없는지 나는 모른다. 파이어 폭스에서 내가 일을 할 수 있었던 유일한 예는 위에 게시 한 것이며 반쯤 작동합니다. – user2577468

+0

@ user2577468 제게 그것은 Firefox 25에서 작동하며 DotNetNuke와 .ascx가 무엇인지 알지 못합니다. 콘솔로 시도해보고 오류를 게시 할 수 있습니까? – Oriol

+0

나는 FireFox 22에 있습니다. 오류가 발생하지 않으며 코드가 올바르게 실행되고 최대 값에 도달하면 전체 키보드가 잠겨 있습니다. – user2577468

관련 문제