자바 스크립트 나머지 문자 입력 없음

필드 대신 <span> 또는 <p> 태그에 값을 출력하는 순수 자바 스크립트 텍스트 남은 카운터를 사용할 수 있습니까? Jquery 솔루션이나 input 필드에 출력되는 솔루션 만 찾을 수 있습니다.자바 스크립트 나머지 문자 입력 없음

출처

2012-07-01 Lodder

공유 해 주셔서 감사합니다.하지만이 방법은 스택 오버플로에 표시하기에 적합하지 않습니다. 자신의 해결책을 공유하고 싶다면 '어떻게해야합니까?'하고 물어보아야합니다. –

Re Peter의 코멘트, 더 많은 독서와 공식 입장 : http://blog.stackoverflow.com/2011/07/ 그 질문에 대답하고 자신의 질문/ –

당신은 아마 함수에 매개 변수로뿐만 아니라'charsleft' 스팬의 ID를 전달하고자 할 것입니다, 그렇지 않으면 불가능합니다 각 페이지에서 두 번 이상 사용하십시오. –

많은 사람들이 순수한 자바 스크립트 인 나머지 문자 카운터를 원하며 입력 상자에서 숫자를 미리 보지 못했음을 알았습니다. 나는 JSFiddle 어젯밤에 주위를 어지럽 혀서 약간의 작업을 수행했으며 나머지 문자를 <span>과 같은 다른 태그에 표시 할 수있었습니다. 그래서 나는 이것을 모든 사람과 공유하고 그것이 유용하게 쓰일 수 있기를 바랄뿐입니다.

HTML :

<textarea id="message" cols="20" rows="5" name="message" onKeyDown="textCounter('message','messagecount',100);" onKeyUp="textCounter('message','messagecount',100);"></textarea> 
<span id="charsleft"></span>

자바 스크립트 : 여기

<script> 
    function textCounter(textarea, countdown, maxlimit) { 
     var textareaid = document.getElementById(textarea); 
     if (textareaid.value.length > maxlimit) 
      textareaid.value = textareaid.value.substring(0, maxlimit); 
     else 
      document.getElementById('charsleft').innerHTML = '('+(maxlimit-textareaid.value.length)+' characters available)'; 
     } 
</script> 

<script type="text/javascript"> 
    textCounter('message','messagecount',100); 
</script>

것은 또한 노력하고 있습니다 JSFiddle

참고 : 사람이 더 나은 만들기 위해 스크립트에 기여하고자해야 , 자유롭게 그렇게 해주세요. 나는 Javascript 전문가가 아니므로 가장 사용자 친화적 인 솔루션 일 가능성이 큽니다.

친절 감사

출처

2012-07-01 15:35:46 Lodder

'textareaid'를 전역으로 만들고 있습니다. 'var textareaid '를 사용하십시오. 또한 최대 제한에 도달 할 때마다 매번 부분 문자열 대신에'onKeyDown' 이벤트에'false false '를 반환 할 수 있다고 생각합니다. – Jashwant

@Jashwant :'textareaid'를'var textareaid'로 변경했습니다. 그러나 두 번째 방법에 대해서는 확실하지 않습니다. 암시. 당신이 내 JSFiddle을 편집 할 수 있다면, 그것은 많이 감사 할 것입니다. – Lodder

당신이 페이지에 jQuery를 넣어 경우 다음과 같은도 작동합니다 (그리고 왜 것없는 당신 :)) :

$('#text-input-area').keyup(function(){ 
    $('#target-div').text(max_length-$(this).val().length + " characters remaining"); 
})

출처

2012-07-01 15:46:47 Andbdrew

제가 사용했던 방법은 순수한 자바 스크립트였습니다. 단지 작은 함수에 대해서만 전체 라이브러리를로드하는 것이 포인트가 아니기 때문입니다. – Lodder

@Lodder aw 어서, 당신은 그것을 사용할거야! :) – Andbdrew

Lodder의 대답은 완벽 - 그 I 제외 동일한 페이지에서 다시 사용할 수 없습니다. 스팬의 이름을 전달하는 코드를 수정하여 동일한 페이지에서 다시 사용할 수 있습니다.

<script> 
function textCounter(textarea, countdown, maxlimit, nameofspan) { 
    var textareaid = document.getElementById(textarea); 
    if (textareaid.value.length > maxlimit) 
     textareaid.value = textareaid.value.substring(0, maxlimit); 
    else 
     document.getElementById(nameofspan).innerHTML = '('+(maxlimit-textareaid.value.length)+' characters available)'; 
    } 
</script> 


<textarea id="message" cols="20" rows="5" name="message" onKeyDown="textCounter('message','messagecount',100,'messagespan');" onKeyUp="textCounter('message','messagecount',100,'messagespan');"></textarea> 
<span id="messagespan"></span> 

<script type="text/javascript"> 
    textCounter('message','messagecount',100,'messagespan'); 
</script>

출처

2017-08-10 14:32:30

자바 스크립트 나머지 문자 입력 없음

답변

관련 문제