텍스트 영역 입력에 카운터 추가

다음 스크립트를 사용하여 목적을 수행하지만 남은 문자를 시각적으로 알려주는 카운터를 추가하려고합니다.텍스트 영역 입력에 카운터 추가

스크립트

function limit(element, max_chars) 
{ 
    if(element.value.length > max_chars) 
     element.value = element.value.substr(0, max_chars); 
}

HTML

<textarea onkeyup="javascript:limit(this, 150)" onblur="limit(this,150)" name="message" rows="4" style="width:99%; margin: 0;" class="unfocusinput"></textarea>

출처

2011-04-25 Frank Nwoko

몇 가지 요소를 가져 와서 element.value.length 값을 기준으로 내용을 업데이트하는 제한 함수에 몇 줄을 추가 할 수 있습니다.

HTML :

<textarea ...></textarea> 
<span id="contentLen">count goes here</span>

자바 스크립트 :

function limit(element, max_chars) 
{ 
    if(element.value.length > max_chars) 
    { 
     element.value = element.value.substr(0, max_chars); 
    } 
    document.getElementById ('contentLen').innerHTML = element.value.length; 
}

출처

2011-04-25 15:26:23 GordonM

그것은 입력 된 문자의 수를 계산하며 남은 문자는 계산하지 않습니다. 어떻게해야합니까? –

그럴 경우 max_chars에서 element.value.length를 간단히 빼기 만하면됩니다. – GordonM

-1

여기에 단지를 수행하는 jQuery plugin을합니다.

출처

2011-04-25 15:23:51

감사합니다. 그것을 확인합니다. 요즘로드되는 플러그인의 양은 점점 늘어나고 있습니다. –

... 아니요. 자신의 코드를 작성하거나 복사하여 붙여 넣기는 불가능합니다. 라이브러리를 사용하면 언제나 문제를 해결할 수있는 더 좋은 방법이 될 것입니다. –

링크를 제공하는 것은 해결책이 아니며 플러그인을 사용하는 것이 더 좋은 방법은 아닙니다. – Hussein

친구; 키 코드 8 백 스페이스입니다 :

당신은

if(document.getElementById(element).value.length==limit && event.keyCode!=8) 
document.getElementById(element).blur();

PS onKeyDown에

에이 기능을 사용할 수 있습니다.

출처

2011-04-25 15:27:59 esquare

삭제 또는 반환은 어떻게됩니까? :) –

스크립트

function limit(element, max_chars, counter) 
{ 
    if(element.value.length > max_chars) 
     element.value = element.value.substr(0, max_chars); 
    document.getElementById(counter).innerHTML = element.value.length - max_chars; 
}

HTML

<textarea onkeyup="javascript:limit(this,150,'someCounter')" onblur="limit(this,150,'someCounter')" name="message" rows="4" style="width:99%; margin: 0;" class="unfocusinput"></textarea> 
<span id"someCounter">150</span> chars left

출처

2011-04-25 15:29:05

텍스트 영역 입력에 카운터 추가

답변

관련 문제