JQuery: ввод текста остальные символы счетчик

Question

Я пытаюсь написать простой оставшиеся символы счетчик для моего BackOffice input текстов с jQuery, но он не работает:

<script type="text/javascript"> 
$(document).ready(function(){ 

function text_counter (input_text, target) { 
    var max = $(input_text).attr("maxlength"); 
    $(input_text).keydown (function() { 
     var timer = setTimeout (function() { 
      var text = $(input_text).text(); 
      var current = text.length; 
      $(target).text(current + "/" + max); 
     }, 1); 
    }); 
}    
text_counter ("#description", "#description_counter"); 

}); 
</script> 

<input id="description" type="text" maxlength="250" value="Default text"> 
<span id="description_counter"></span> 

Если я начинаю писать внутри input , изменение элемента span в 12/250 и заморозить здесь (12 == «Текст по умолчанию» .length).

Где я ошибаюсь?

Answer 1

попробовать с помощью Вэла() вместо текста()

var text = $(input_text).val();

Answer 2

http://jsbin.com/epeva5/edit

Answer 3

$(function(){ 

    function text_counter (input_text, target) 
    { 
    var $input = $(input_text); 
    var $target = $(target); 
    var max = $input.attr("maxlength"); 
    var defaultText = $input.val(); 

    $(input_text).keypress(function() { 
     var val = $input.val(); 
     var len = val.length; 
     if (val == defaultText) { 
     len == 0; 
     } 
     $target.text(len + "/" + max); 
    }); 
    } 
    text_counter ("#description", "#description_counter"); 

}); 

Answer 4

Это мое решение для вас:

function text_counter(input_text, target) { 
    var max = input_text.attr("maxlength"); 
    input_text.keyup(function() { 
     target.text(this.value.length + "/" + max) 
    }); 
} 

text_counter($("#description"), $("#description_counter")); 

Пример: http://jsfiddle.net/jonathon/dkWHp/

Пара различий. Во-первых, я использую событие keyup. В противном случае вы запускаете код до удаления символа (возможно, именно поэтому вы используете setTimeout) - он также запускается в обратном пространстве. Я также передаю объекты jQuery в функцию text_counter. Это вы просто создали единственный селектор jQuery (вместо нескольких вызовов $(input_text)). В обработчике keyup я просто вызываю this.value.length, так как this является элементом ввода HTML, и мне не нужно беспокоиться о jQuery для этого.

Для хорошей меры, вот еще реализация text_counter:

function text_counter(input_text, target) { 
    var max = input_text.attr("maxlength"); 
    setInterval(function(){ 
     target.text(input_text.val().length + "/" + max) 
    }, 100); 
} 

Пример: http://jsfiddle.net/jonathon/vZHGU/

Вместо обработки ключевых событий, я просто установить таймер, который устанавливает текст target каждые 100 мс. Зачем это показывать? Когда вы обрабатываете ключевое событие, оно срабатывает только один раз. Второй кусок кода, который я дал, будет постоянно проверять длину текстового поля, чтобы он обновлялся, даже если кнопка backspace удерживается нажатой.

Мне не нравится второе решение, потому что оно создает ненужную работу (setInterval будет работать независимо от взаимодействия с пользователем), но я это показываю, потому что вы можете играть с обоими решениями. Например, вы могли бы вызывать 5 секунд опроса на клавиатуре или что-то, чтобы получить лучшее из обоих миров :)

Answer 5

У меня была аналогичная проблема, и я написал для этого плагин jQuery/BootStrap. Вы можете использовать его как:

$('input.className').maxlength({ 
    threshold: 10, 
    warningClass: "label label-success", 
    limitReachedClass: "label label-important", 
    separator: ' of ', 
    preText: 'You have ', 
    postText: ' chars remaining.' 
}); 

Вы можете получить его от GitHub: http://mimo84.github.io/bootstrap-maxlength/ (вы найдете несколько примеров, а).