jQuery char counter logic을 디버그하는 데 도움이 필요합니다.

Question

아래 입력란에 입력 문자가있는 텍스트 영역이 있습니다. 최대 입력 제한도 설정되어 있습니다. 또한 클릭 할 때 해당 텍스트 영역에 값을 삽입하는 스팬 몇 개를 추가했습니다.

<span id="tag1" class="tags"></span> 
<span id="tag2" class="tags"></span> 
<br> 
<textarea id="myTextArea"></textarea> 
<br> 
Counter: <font id="charCount"></font> 

스팬의 콘텐츠에는 (10)과 같은 숫자 값이 들어 있습니다. 값이 텍스트 영역에 삽입 될 때 카운터가 삽입 값의 char 카운트가 아닌 해당 값만큼 증가해야합니다.

현재 일부는 작동하지만 일부는 작동하지 않습니다. 함께 사용하는 데 도움이 필요합니다. 나는 여기에 내 코드를 삽입 : http://jsfiddle.net/8R9DH/11/

---

편집 :

예상되는 동작 :

텍스트 영역에 입력 직접에서 입력을 통해 또는 스팬 또는 조합을 클릭하여 수행 할 수 있습니다

1. 모두
2. 카운터는 최대 한도까지 모든 문자를 카운트하고 한도에 도달하면 입력을 중지합니다.

3. 각 카운터의 개수 문자 및 공백은 수동으로 입력되지만 삽입이 사용자 인 경우 포함에 포함 된 숫자 값만큼 카운터가 증가합니다. 예 :

   <textarea id="myTextArea">abc <text insert (5)> 123</textarea> 
   

: < 텍스트 (10)> == 10 예를 들어, 다음 입력 (13 개)의 문자로 간주되어야 포함 (5)> == 5 < 텍스트를 포함

Answer 1

자바 스크립트 로직에 오류가 있습니다. 스팬의 onClick 이벤트라는 함수에는 카운트를 올바르게 업데이트하는 로직도 포함되어야합니다. 아래는 샘플입니다.

$(".tags").click(function() { 
    var insertTag = $(this).text(), 
     tagLength = insertTag.replace(/[^0-9]/g, ""); 
    var n = parseInt(input.val().replace(/{|}/g, '').length) + parseInt(tagLength); 
    if (n <= limit) { 
     input.append(" &lt;" + insertTag + "&gt;"); 
     count.text(n); 
    } 
}); 

그러나이 코드는 텍스트 상자의 기존 항목을 올바르게 계산하려면 추가로 개선해야합니다. 따라서 기존 태그를 별도로 필터링하고 텍스트 상자에있는 다른 문자와의 수를 계산하려면

을 개선해야합니다.