내 카운터가 예상대로 작동하지 않는 이유

내 앱에 JS 카운터를 구현했습니다. 내 두 개의 다른 카운터가 작동해야하는 두 개의 양식 필드가 있습니다. A #post_title 및 #body-field.내 카운터가 예상대로 작동하지 않는 이유

이 내 JS입니다 :

counter = function() { 
 
\t var title_value = $('#post_title').val(); \t \t 
 
    var body_value = $('#body-field').val(); 
 

 
    if (title_value.length == 0) { 
 
     $('#wordCountTitle').html(0); 
 
     return; 
 
    } 
 

 
    if (body_value.length == 0) { 
 
     $('#wordCountBody').html(0); 
 
     return; 
 
    } 
 

 
    var regex = /\s+/gi; 
 
    var wordCountTitle = title_value.trim().replace(regex, ' ').split(' ').length; 
 
    var wordCountBody = body_value.trim().replace(regex, ' ').split(' ').length; 
 

 
    $('#wordCountTitle').html(wordCountTitle); 
 
    $('#wordCountBody').html(wordCountBody); 
 
}; 
 

 
$(document).on('ready page:load', function() { 
 
    $('#count').click(counter); 
 
\t $('#post_title, #body-field').on('change keydown keypress keyup blur focus', counter); 
 
});

<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</head> 
 

 
<body> 
 
<label for="title">Title</label> 
 
    <textarea id="post_title" placeholder="Enter Title"></textarea> 
 
    <span id="wordCountTitle">0</span> words<br/> 
 

 
<label for="report">Report</label> 
 
    <textarea id="body-field"placeholder="Provide all the facts." rows="4"> 
 
</textarea><br /> 
 
<span id="wordCountBody">0</span>/150 words 
 
    
 
</body> 
 

 
</html>

$(document).ready(ready); 이전에 내가 간결성을 위해 남겨 파일의라는 var ready = function()에 해당 겉으로는 부유. 하지만 문제가 될 수 있다고 생각되는 순서대로 document.ready() 전화를 남겼습니다.

그래서 내가 가지고있는 문제는 #post_title 필드를 클릭하고 카운터를 업데이트하지 않는 단어를 입력 할 때마다 발생합니다. 그러나 #body-field을 클릭하고 입력을 시작하면 #body-field의 카운터가 즉시 업데이트되기 시작하지만 #post_title의 카운터도 작동하기 시작하고 해당 필드에 올바른 단어 수가 표시됩니다.

이 문제의 원인은 무엇일까요? 1

편집 그냥 내가 오류가 너무 다른 상태로 존재한다는 것을 깨달았다 코드와 함께 연주. 제목을 입력하기 전에 두 번째 입력란 (예 : #body-field)에 텍스트를 추가하면 본문 입력란의 카운터가 증가하지 않습니다. #post_title에 제목을 입력하기 시작한 후에 만 업데이트됩니다. 그래서 그들은 어떻게 든 연결되어 있습니다.

는

출처

2015-02-03 marcamillion

이 이름은 잘못된 이름이지만,'# post-title'이 아닐 수도 있습니다. 맞습니까? (하나는 하이픈, 다른 하나는 밑줄을 사용) –

HTML을 공유 할 수 있습니까? 바이올린 데모가 더 좋습니다. – Farhan

@DanHeberden 그게 그렇게 쉬웠 으면 좋겠다. 아니요, 이름이 맞습니다. 내가 말하는 정확한 동작을 볼 수 있도록 코드 스 니펫을 추가했습니다. 제목에 코드를 추가하고 본문 탭을 클릭하면 의미를 알 수 있습니다. – marcamillion

counter 기능 검사를 수행하지 말고 두 필드 모두에서 작업을 수행하면 안됩니다. counter 함수는 jquery의 this 키워드를 사용하거나 event 매개 변수를 사용하고이를 event.target과 함께 사용하여 정확하게 동일한 작업을 수행해야합니다.

가 여기에 리팩터링이다 : 또한

var counter = function(event) { 
    var fieldValue = $(this).val(); 
    var wc = fieldValue.trim().replace(regex, ' ').split(' ').length; 
    var regex = /\s+/gi; 
    var $wcField = $(this)[0] === $('#post_title')[0] ? $('#wordCountTitle') : $('#wordCountBody'); 

    if (fieldValue.length === 0) { 
     $wcField.html(''); 
     return; 
    } 

    $wcField.html(wc); 
}; 

$(document).on('ready page:load', function() { 
    $('#post_title, #body-field').on('change keyup paste', counter); 
});

JSBin playground

, 당신이 그 텍스트 영역에서 많은 이벤트를 듣고 왜 내가 완전히 확실하지 않다, 때 change keyup paste는 그것을해야한다.

출처

2015-02-03 04:58:51 zealoushacker

나는 네가 어디로 가고 싶은지 정말 좋아하지만, 나에게 도움이되지 않는다. 카운터는 절대로 증가하지 않습니다. 나는 또한 오류가 발생하지 않습니다. – marcamillion

단어 수를 업데이트해야하기 때문에 맞습니다 ... 곧 수정 될 것입니다 : – zealoushacker

실수가 아니라면이 '$ (this)'해결책이 모든 양식 필드에서 실행됩니까? – marcamillion

이 발생하는 오류 때문에이 실행할 수있는 카운터 위해서는, 모두 제목과 본문 일부 값이 있어야한다는 것을 의미 코드

if (title_value.length == 0) { 
    $('#wordCountTitle').html(0); 
    return; 
} 

if (body_value.length == 0) { 
    $('#wordCountBody').html(0); 
    return; 
}

이러한 2 블록이다. 양쪽에서 return을 제거하면 올바르게 작동합니다.

편집

는 생각 제거하는 두 블록은 또한 당신에게 당신이 원하는 동일한 동작을 제공됩니다. 두 블록을 모두 갖고 싶다면 카운터를 제목과 본문으로 구분해야합니다.

편집 2

여기에 카운터 기능의 간단한 구현입니다.

counter = function() { 
    var title_value = $('#post_title').val();  
    var body_value = $('#body-field').val(); 

    $('#wordCountTitle').html(title_value.split(' ').length); 
    $('#wordCountBody').html(body_value.split(' ').length); 
}

출처

2015-02-03 04:51:30 jvnill

그래서'return'을 제거하려고 시도했지만 그 문제를 해결하는 것처럼 보이지만 또 다른 문제가 발생합니다. 일단 필드를 클릭하면, 아무 것도 입력하지 않아도 카운터가 '1 단어'로 증가합니다. 실제로 제목과 본문 필드 중 하나를 클릭하면 제목과 본문 필드의 카운터가 증가합니다. FWIW,'if' 블록을 모두 제거하면이 문제가 생깁니다. – marcamillion

이것은 정규 표현식 때문입니다. .split ('') .length'는 1로 평가됩니다. 간단한'text.split ('') .length'는 작동하지 않을까요? – jvnill

아니 ... 그냥 시도하고 작동하지 않습니다. 나는. 나는 시도했다 :'var wordCountBody = body_value.trim(). text.split ('') .length' 그리고 다른 변수와 동일하고 작동하지 않는다. – marcamillion

내 카운터가 예상대로 작동하지 않는 이유

답변

관련 문제