отображение счетчика текстовых полей javascript

Question

Я использую ответ, приведенный здесь Count textarea characters, но его необходимо изменить, чтобы обращать внимание на символы в текстовом поле. И измените цвет, когда он попадает на определенные счетные числовые пределы, чтобы дать пользователю некоторую форму предупреждая, что они приближаются к ограничению поля.

Это то, что я собрал до сих пор, сам по себе. Это действительно работает! (Поразительно). Во-первых, это то, что я начал с:

$(window).load(function() { 
    $("#input_4_1").keyup(function() { 
     $("#count_4_1").text("Characters remaining: " + (2550 - $(this).val().length)); 
    }); 
}); 

И это то, что я заново изобрел его как:

$(window).load(function() { 
    $("#input_4_1").keyup(function() { 
     if (2550 - $(this).val().length >= 501) { 
      $("#count_4_1").text("Characters remaining: " + (2550 - $(this).val().length)); 
     } else if ((2550 - $(this).val().length <= 500) && (2550 - $(this).val().length >= 101)) { 
      $("#count_4_1").text("<span style=\"color: #55a500;\">Characters remaining: " + (2550 - $(this).val().length) + "</span>"); 
     } else if (2550 - $(this).val().length <= 100) { 
      $("#count_4_1").text("<span style=\"color: #ff0000;\">Characters remaining: " + (2550 - $(this).val().length) + "</span>"); 
     } 
    }); 
}); 

И это то, что удивительно работает. За одним исключением - и здесь возникает вопрос. Я почти ничего не знаю о JS. Когда считывание номера символа составляет от 2550 до 500, дисплей отображается в тонком порядке. Когда персонаж считывающий становится от 500 до 100 считанных показывает:

<span style="color: #55a500;">Characters remaining: 499</span> 

Так как же я получаю JS на самом деле удар CSS в надлежащий эффект отображения, вместо того, чтобы просто вторя на странице ??

Если применимо, используется jQuery.

Answer 1

Поскольку вы используете HTML-теги, вы не можете установить их с помощью метода .text(). Используйте вместо этого метод .html():

Я добавил немного очистки кода .. установите вычисление в переменной, чтобы сделать его чище ...

$(window).load(function() { 
    $("#input_4_1").keyup(function() { 
     var diff = (2550 - $(this).val().length); 
     if (diff >= 501) { 
      $("#count_4_1").html("Characters remaining: " + diff); 
     } else if ((diff <= 500) && (diff >= 101)) { 
      $("#count_4_1").html("<span style=\"color: #55a500;\">Characters remaining: " + diff + "</span>"); 
     } else if (diff <= 100) { 
      $("#count_4_1").html("<span style=\"color: #ff0000;\">Characters remaining: " + diff + "</span>"); 
     } 
    }); 
}); 

Answer 2

На странице JQuery, о .text (здесь: http://api.jquery.com/text/):

Мы должны знать, что этот метод экранирует строку при условии по мере необходимости так, что он будет правильно сделать в HTML. Для этого он вызывает метод DOM .createTextNode(), не интерпретирует строку как HTML

(курсив мой.)

Вы должны добавить текст на страницу с .append (здесь: http://api.jquery.com/append/), а не поместить его в .text.

Кроме того, если в элементе, в котором вы размещаете новую строку, нет другого содержимого, вы можете просто использовать .html (здесь: http://api.jquery.com/html/), чтобы заменить все содержимое контейнера новой строкой.

Answer 3

Есть много способов сделать это:

первым создать разметку в вашем HTML, как:

<div id="warning"></div> /* Exactly above or below your text box */ 

Далее в вас JS вы можете использовать:

Javascript:

var html= "<span style='color: #55a500;'>Characters remaining: 499</span>"; 
document.getElementById("warning").innerHtml(html); 

с помощью Jquery:

var html= "<span style='color: #55a500;'>Characters remaining: 499</span>"; 
document.getElementById("warning").innerHtml(html); 
$('#warning').html(html); 

или

$(window).load(function() { 
    $("#input_4_1").keyup(function() { 
     if (2550 - $(this).val().length >= 501) { 
      $("#count_4_1").html("Characters remaining: " + (2550 - $(this).val().length)); 
     } else if ((2550 - $(this).val().length <= 500) && (2550 - $(this).val().length >= 101)) { 
      $("#count_4_1").html("<span style=\"color: #55a500;\">Characters remaining: " + (2550 - $(this).val().length) + "</span>"); 
     } else if (2550 - $(this).val().length <= 100) { 
      $("#count_4_1").html("<span style=\"color: #ff0000;\">Characters remaining: " + (2550 - $(this).val().length) + "</span>"); 
     } 
    }); 
}); 

Answer 4

В качестве альтернативы и просто для удовольствия: вы можете, как это более общие, CSS/дата-atributes и не Jquery подход:

[].slice.call(
 
    document.querySelectorAll('div[data-isRestrictedTextArea]') 
 
).forEach(
 
    function(el) { 
 
    var txtarea = el.querySelector('textarea') 
 
     ,cntr = el.querySelector('div[data-iscounter]'); 
 
    
 
    cntr.setAttribute('data-maxlen', el.getAttribute('data-maxlen')); 
 
    txtarea.onkeyup = count; 
 
    } 
 
); 
 

 
function count(e) { 
 
    var len = this.value.length, 
 
     cntr = this.parentNode.querySelector('div[data-iscounter]'), 
 
     maxl = this.parentNode.getAttribute('data-maxlen'), 
 
     warn = maxl-Math.floor(0.2*maxl), // 80% 
 
     stop = maxl-Math.floor(0.1*maxl); // 90% 
 

 
    cntr.setAttribute('data-ncharacters', len); 
 
    cntr.className = len >= stop ? 'stop' 
 
        : len >= warn ? 'warn' 
 
        : ''; 
 
    // truncate if len>=maxlen 
 
    this.value = len >= maxl ? this.value.substr(0, maxl) : this.value; 
 
    // set attribute for reporting 
 
    cntr.setAttribute('data-ncharacters', len >= maxl ? maxl : len); 
 
    return; 
 
}

body {font: 12px/15px normal verdana,arial;} 
 

 
div[data-isrestrictedTextarea] { 
 
    display: inline-block; 
 
    margin-top: 1em; 
 
} 
 

 
div[data-iscounter] { 
 
    color: green; 
 
    background-color: #eee; 
 
} 
 

 
div[data-iscounter]:before { 
 
    content: 'you typed 'attr(data-ncharacters)' characters'; 
 
} 
 

 
div[data-iscounter]:after { 
 
    content: ' [max 'attr(data-maxlen)' characters]'; 
 
} 
 

 
div[data-iscounter].warn { 
 
    color: orange; 
 
} 
 

 
div[data-iscounter].stop { 
 
    color: red; 
 
}

<div data-isrestrictedTextarea="1" data-maxlen="15"> 
 
    <textarea placeholder="start typing" rows="2" cols="60"></textarea> 
 
    <div id="cnt_cnttxt" data-iscounter="1" data-ncharacters="0"></div> 
 
</div> 
 

 
<div data-isrestrictedTextarea="1" data-maxlen="100"> 
 
    <textarea placeholder="start typing" rows="5" cols="60"></textarea> 
 
    <div id="cnt_cnttxt" data-iscounter="1" data-ncharacters="0"></div> 
 
</div>