Почему мой счетчик не работает в поле, как я ожидал

Я внедрил счетчик JS в своем приложении. У меня есть 2 поля формы, на которые должны работать мои два разных счетчика. A #post_title и a #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 тоже начинает работать и показывает правильное количество слов в этом поле.

Что может быть причиной этого?

Edit 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

О, вы правы, потому что нам нужно обновить метку wordcount ... Редактировать предстоящий :) – zealoushacker

Если я не ошибаюсь, будет ли это '$ (это)' решение работать в каждом поле формы? – marcamillion

ошибка у вас возникли из-за этих 2-х блоков кода

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

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

Это означает, что в течение счетчиков для запуска, как заголовок и тело должно иметь какое-то значение. Просто удалите return на обоих, и он должен работать.

EDIT

Я думаю, что удаление обоих, если блоки будут также даст вам то же самое поведение, которое вы хотите. Если вы хотите иметь оба блока, вам придется отделить счетчик от названия и тела.

EDIT 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

Это из-за вашего регулярного выражения. '. '.replace (/ \ s +/gi,' ') .split (' ') .length' оценивается в 1. не будет простой' text.split (' ') .length' работы? – jvnill

Нет, просто попробовал, и он не работает. То есть Я попытался: «var wordCountBody = body_value.trim(). Text.split ('') .length' и то же самое для другой переменной, и он не работает. – marcamillion

Почему мой счетчик не работает в поле, как я ожидал

ответ

Смежные вопросы