Why does my counter not work in the field like I would expect
Question
I have implemented a JS counter in my app. I have 2 form fields that my two different counters should work for. A #post_title and a #body-field .
This is my JS:
counter = function() { var title_value = $('#post_title').val(); 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); $('#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>
The seemingly stray $(document).ready(ready); corresponds to a var ready = function() called earlier in the file that I left out for brevity purposes. But I left the document.ready() call in the order that it appears just incase it could be causing an issue.
So the issue I am having is, whenever you click on the #post_title field and enter words the counter does not update. But as soon as I click on the #body-field and start typing not only does the counter for the #body-field work and start updating immediately, but the counter for the #post_title starts working too and shows the correct amount of words in that field.
What could be causing this?
Edit 1
Just playing with that code snippet I realized that the error exists in another state too. If you just add text to the 2nd field first (ie the #body-field ) before entering in the title...the counter for the body-field won't increment. It will only update AFTER you start entering a title in the #post_title . So they are both linked somehow.
2 answers
solution1
1 2015-02-03 04:51:30
the error you're having is because of these 2 blocks of code
if (title_value.length == 0) {
$('#wordCountTitle').html(0);
return;
}
if (body_value.length == 0) {
$('#wordCountBody').html(0);
return;
}
This means that in order for the counters to run, both title and body should have some value. Just remove the return on both and it should work.
EDIT
I think removing both if blocks will also give you the same behavior you want. If you want to have both if blocks, you'll have to separate the counter for the title and body.
EDIT 2
here's a simpler implementation of counter function.
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);
}
solution2
1 ACCPTED 2015-02-03 04:58:51
You should not have the counter function check and perform operations on both fields. The counter function should do exactly the same operation, by utilizing jquery's this keyword inside it, or by taking an event parameter and using that as an alternative, with event.target .
Here's the refactor:
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);
});
Also, I am not entirely sure why you are listening to that many events on those textareas, when change keyup paste ought to do it.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.