2

при старте в features-elem__symbols-number показываеться максимальное количество введеных символов(например 30), при вводе начинает считать сколько можно еще ввести. Проблема в том счетчик не работает если использовать клавиши delete и Detect backspace, а также если ввести 30 символов то будет показываться -1 вместо 0 html:

<div class="features-elem__field symbol-input__counter">
   <input type="text" class="features-elem__input symbol-counter__input">
   <div class="features-elem__symbols">
       <span class="features-elem__symbols-arrow">&#60;</span>
       <span class="features-elem__symbols-number">30</span>
       <span class="features-elem__symbols-text">sym</span>
   </div>
</div>

js:

function inputSymbolCounter() {
        if ($(".symbol-input__counter").length) {
            var maxValueInputInit = document.querySelector(".symbol-input__counter .features-elem__symbols-number").textContent;
            var maxValueInit = parseFloat(maxValueInputInit);
            document.querySelector(".symbol-input__counter .symbol-counter__input").oninput = function(e) {
                var maxValueInput = document.querySelector(".symbol-input__counter .features-elem__symbols-number").textContent;
                var maxValue = parseFloat(maxValueInput);
                if (e.target.value.length > maxValueInit) {
                    return false;
                    e.preventDefault();
                } else {
                    document.querySelector(".symbol-input__counter .features-elem__symbols-number").innerHTML = maxValueInit - e.target.value.length;
                }
            };
        }

    };
    inputSymbolCounter();

1 ответ 1

5

document.querySelector('input').addEventListener('input', function (e) {
  document.querySelector('output').textContent = 30 - e.target.value.length
})
<input maxlength=30> <output></output>

5
  • подскажите как можно остановить ввод символов если мы ввели уже 30 - return false и e.preventDefault() не срабатывают
    – dmitriy
    8 сен 2017 в 10:47
  • @DimaVleskov, обновил ответ.
    – Qwertiy
    8 сен 2017 в 10:50
  • Qwertiy а если скриптом
    – dmitriy
    8 сен 2017 в 10:51
  • я обновил свой код в вопросе
    – dmitriy
    8 сен 2017 в 10:52
  • А я уже ответил
    – Qwertiy
    8 сен 2017 в 11:00

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.