페이지의 자바 스크립트 단어 개수가 키가 없습니다.

Question

상자에있는 단어의 양을 계산하는 자바 스크립트가 조금 있습니다. 자바 스크립트는 다음과 같다 :

<script type="text/javascript"> 
    function cnt(w,x){ 
     var y=w.value; 
     var r = 0; 
     a=y.replace(/\s/g,' '); 
     a=a.split(' '); 

     for (z=0; z<a.length; z++) {if (a[z].length > 0) r++;} 
     x.value=r; 
     if (r > 60) { 
      x.value='Please reduce the word count'; 
     } 
    } 
</script> 

이 같은 형태 :

<label>Free brochure from entry:</label> 
<textarea name="freebrochureentryform" id="freebrochureentryform" onKeyUp="cnt(this,document.brochure.c)"><?php echo $row['freebrochureentryform']; ?></textarea> 

<label>Brocure Entry Word Count:</label> 
<input type="text" name="c" value="0" size="20" onKeyUp="cnt(document.brochure.freebrochureentryform,this)" /> 

기본적 바닥 입력 필드는 상위 한 단어의 양을 나타낸다. 하지만 당신이 상단 상자 "freebrochureentryform"을 클릭 할 때만 그렇게하지만, 상자를 클릭 할 때 페이지가로드 되 자마자 단어의 양을로드하려고합니다. 나는 그것과 함께 할 것 같다.

onKeyUp="cnt(document.brochure.freebrochureentryform,this)" 

그러나 무엇을 바꾸어야할지 모른다.

은 (Btw는 방법 브로셔는 내 양식의 이름입니다.)

어떤 도움이 크게 감사합니다.

이안

Answer 1

에 cnt(w,x)를 호출합니다.

대신 onkeyup 이벤트를 수신, 당신은 더 적절한 oninput (또는 onpropertychange IE에 대한) 이벤트를 수신 할 수 있습니다

JSFiddle

<label>Free brochure from entry:</label> 
<textarea name="freebrochureentryform" id="freebrochureentryform">Lorem Text</textarea> 
<br /> 
<label>Brocure Entry Word Count:</label> 
<input type="text" name="c" id="c" value="0" size="20" /> 

window.onload=function(){ 
    function cnt(area,output){ 
     var txt=area.value.replace(/^\s+|\s+$/g,"").replace(/\s+/g," ").split(" "); 
     if(txt.length>10){ 
      output.value="Please delete some word"; 
     }else{ 
      output.value=txt.length; 
     } 
    } 
    var textarea=document.getElementById("freebrochureentryform"); 
    var info=document.getElementById("c"); 
    if("addEventListener" in window){ 
     if("oninput" in textarea){ 
      textarea.addEventListener("input",function(){ 
       cnt(textarea,info); 
      },false); 
     }else if("onpropertychange" in textarea){ 
      textarea.addEventListener("propertychange",function(e){ 
       if((e||event).propertyName=="value"){ 
        cnt(textarea,info); 
       } 
      },false); 
     }else{ 
      textarea.addEventListener("change",function(){ 
       cnt(textarea,info); 
      },false); 
     } 
    }else{ 
     textarea.attachEvent("onpropertychange",function(){ 
      if(event.propertyName=="value"){ 
       cnt(textarea,info); 
      } 
     }); 
    } 
    cnt(textarea,info); 
}; 

일부 명령 :

• var txt=area.value
  • .replace(/^\s+|\s+$/g,"")은 trim을 의미하고;
  • .replace(/\s+/g," ")은 일련의 공백 (줄 바꿈 포함)을 하나로 결합합니다 (분할 된 배열을 반복 할 필요없이 더 나은 split).
  • .split(" ") (이미 완료 한대로) 공백으로 나눕니다.
• oninput는 IE9하지만 has some buggy behavior에 도입되어 있으므로 먼저 onproperychange을 시도 할 수 있습니다;
• function cnt() 및 textarea/info을 window.onload에 넣으면 closure 안에 '안전'합니다. 그들은 전역 네임 스페이스를 오염시킬 수 없으며 글로벌 네임 스페이스의 것들은 그들을 오염시킬 수 없습니다.

Answer 2

onKeyUp은 사용자 상호 작용에 트리거합니다. 당신이 측면을로드하면

그래서 대신 더 이벤트 KeyUp

없다. 수동으로 트리거하십시오. 몸에

전화 cnt(document.brochure.freebrochureentryform,document.brochure.c) 수동 (또는 onload)

Answer 3

시도 당신은 window.onload 이벤트에 cnt() 함수를 호출 할 수 있습니다 몸 onload event