Счетчик символов jQuery для нескольких входов - PullRequest
Новая
       38

Счетчик символов jQuery для нескольких входов

2 голосов
/ 23 ноября 2010

У меня около 8 текстовых вводов. Все они в конце концов объединяются с PHP, но для простоты использования я разбил его на несколько «вопросов».

Все поля в конечном итоге объединяются и используются в среде SMS, где отсекается 160 символов. Мне нужно сосчитать все 8 входных данных с помощью jQuery, чтобы показать пользователям, если они превышают отметку в 160 символов.

Очевидно, что я могу очень легко сделать это с любым количеством плагинов для подсчета символов, но все они сделаны с единственной целью textarea, а не разбиты на несколько входов.

Я начал строить это, используя 

var current_count = parseInt($('#chars-remain span').text());

var regex=/^[a-zA-Z0-9\s]+$/;
if(regex.test($(this).val())){
    var current_left = current_count - 1;
}

if (current_left <= 0) {
    $('#chars-remain span').addClass('outOfChars');
} else {
    $('#chars-remain span').removeClass('outOfChars');
}
$('#chars-remain span').text(current_left);

и HTML что-то вроде 

<p id="chars-remain"><span>160</span> Characters Remain</p>

Но на самом деле это не работает. Если вы используете клавишу Delete, она все равно считается как -1 от общей суммы, и есть несколько других ошибок. Есть ли способ использовать приведенный выше код и заставить его работать, или есть плагин, который делает это, что я не могу найти, или, может быть, у кого-то есть лучшее представление о том, что попробовать?

Спасибо !!

/// * РЕДАКТИРОВАТЬ ** \ *

Мой текущий jQuery настроен так: 

$('#form-edit-card input').live('blur keyup',function(e) { 
    $('#howto').hide(); 

    $('#in-firstName').text($('#first_name').val()).show();
    $('#in-lastName').text($('#last_name').val()).show();
    $('#in-titlePosition').text($('#job_title').val()).show();
    $('#in-company').text($('#company_name').val()).show();
    if($('#phone_number').val() != "") { $('#in-officePhone').text("o: "+$('#phone_number').val()).show(); }
    if($('#mobile_number').val() != "") { $('#in-mobilePhone').text("m: "+$('#mobile_number').val()).show(); }
    $('#in-emailAddress').text($('#email').val()).show();
    $('#in-website').text($('#website').val()).show();

});

Это позволяет мне, так как пользователь печатает в полях, он показывает пример того, как SMS будет выглядеть в поле рядом с полем. Поэтому, если я попытаюсь использовать ответ K4emic, то в большинстве случаев он работает, но на Office Phone и Mobile Phone он автоматически добавляет «o:» и «m:», поэтому мне нужен какой-то способ собрать эти три дополнительных символа. также. Может быть, было бы более целесообразно подсчитывать символы абзацев после того, как входные данные записывают в них, чтобы автоматически подсчитывать добавленные символы?

Ответы [ 4 ]

1 голос
/ 26 июля 2012

Я сделал нечто подобное, но самым простым способом я знал как. Я также сделал общий цвет изменения, когда общее количество было более 149 символов, а затем более 160 символов. 

<form id="form1" method="post" action="">
      <input onkeydown="updateDetails();" onkeyup="updateDetails();" type="text" name="company" id="company" />
      <input onkeydown="updateDetails();" onkeyup="updateDetails();" type="text" name="delivery" id="delivery" />
</form>
<div id="details-total">Details: 0 characters</div>


<script type="text/javascript">
<!--

function updateDetails() {
    var total1 = document.getElementById('company').value.length;
    var total2 = document.getElementById('delivery').value.length;
    var grandTotal = total1+total2;

    if (grandTotal < 150) {
        document.getElementById('details-total').innerHTML = '<span style="color: #20851e;">Details: '+grandTotal+' characters (max 160)</span>'; 
    } else if (grandTotal < 161) {
        document.getElementById('details-total').innerHTML = '<span style="color: #ff7800;">Details: '+grandTotal+' characters (max 160)</span>'; 
    } else {
        document.getElementById('details-total').innerHTML = '<span style="color: #fa0023; font-weight: bold;">Details: '+grandTotal+' characters (max 160)</span>'; 
    }
}

//-->
</script>
1 голос
/ 23 ноября 2010

Регистрация слушателей для всех полей, размер которых должен быть ограничен, и повторная оценка ввода каждый раз, кажется мне наиболее очевидным решением. Обратите внимание, что функция обратного вызова keyup срабатывает после того, как ввод был введен в поле ввода, в то время как keydown и нажатие клавиши запускаются до внесения изменений. 

var limited = $('.limited').keyup(function(event) {

    var length = 0;
    var contents = '';

    limited.each(function(index, element) {
        length += $(element).val().length;
        contents += $(element).val();
    });

    console.log(length);
    console.log($(this).val());
    console.log(contents);

});
1 голос
/ 23 ноября 2010

Самый простой способ, который я могу придумать, - это просто создать скрытое поле и динамически изменить его значение, чтобы оно соответствовало объединенной строке из других восьми полей.Тогда вы можете просто взять длину этого поля.

0 голосов
/ 24 ноября 2010

Это, кажется, делает трюк! 

$('#form-edit-card input').live('blur keyup',function(e) { 
    $('#howto').hide();

    $('#in-firstName').text($('#first_name').val()).show();
    $('#in-lastName').text($('#last_name').val()).show();
    $('#in-titlePosition').text($('#job_title').val()).show();
    $('#in-company').text($('#company_name').val()).show();
    if($('#phone_number').val() != "") { $('#in-officePhone').text("o: "+$('#phone_number').val()).show(); } else{ $('#in-officePhone').text('');} 
    if($('#mobile_number').val() != "") { $('#in-mobilePhone').text("m: "+$('#mobile_number').val()).show(); } else{ $('#in-mobilePhone').text('');} 
    $('#in-emailAddress').text($('#email').val()).show();
    $('#in-website').text($('#website').val()).show();

    var count = 0;
    $('p.count_me').each(function(i){
        count += $(this).text().length;
    });
    $('#credits-remain span').text(count);
    $('#character_count').val(count);

    if (count > 120) {
        $('#credits-remain span').addClass('lowChars');
        $('#credits-remain span').removeClass('outOfChars');
    } else if (count > 140) {
        $('#credits-remain span').addClass('outOfChars');
        $('#credits-remain span').removeClass('lowChars');
    } else {
        $('#credits-remain span').removeClass('lowChars');
        $('#credits-remain span').removeClass('outOfChars');
    }
});
...