Метод подстроки не возвращает максимальное ограничение

Question

Когда количество символов превышает максимальное ограничение (20 символов), метод подстроки возвращает символы, введенные во входные данные, с индексов от 0 до 20. Метод подстроки перезаписывает все, что пользователь пытается набрать, с количеством символов, равным 20.

Но в моей программе я могу печатать больше символов после того, как достиг своего максимального предела. Почему это происходит? Я не хочу, чтобы это случилось.

const txt = document.querySelector('textarea')
const message = document.querySelector('.message')

let maxLength = 20;
let warnLength = 15;

['keyup', 'keydown', 'change'].forEach(event => {
  txt.addEventListener(event, textCounter)
})

function textCounter() {
  let count = txt.value.length
  if (count > warnLength) {
    message.innerHTML = `${(maxLength-count)} characters left`
  } else if (count > maxLength) {
    txt.value = txt.value.substring(0, maxLength)
  }
}

textarea {
  width: 400 px;
  height: 100 px;
}

<textarea></textarea>
<div class="message"></div>

Answer 1

Вы можете просто установить свойство maxlength для <textarea> и полностью исключить подстроку кода.

const txt = document.querySelector('textarea');
const message = document.querySelector('.message');

let maxLength = txt.getAttribute('maxlength');
let warnLength = 15;

['keyup', 'keydown', 'change'].forEach(event => {
  txt.addEventListener(event, textCounter);
});

function textCounter() {
  let count = txt.value.length;
  if (count > warnLength) {
    message.innerHTML = `${(maxLength - count)} characters left`;
  }
}

textarea {
  width: 400 px;
  height: 100 px;
}

<textarea maxlength="20"></textarea>
<div class="message"></div>

Answer 2

if (count> warnLength) {всегда верно после char 15

• количество тестов> warnLength && count <= maxLength будет работать </li>
• первое тестирование maxLength будет работать лучше
• использование атрибута maxlength сделает проверку на maxLength ненужной
• , если нет, protectDefault остановит запись:

const txt = document.querySelector('textarea')
const message = document.querySelector('.message')

let maxLength = 20;
let warnLength = 15;

['keyup', 'keydown', 'change'].forEach(event => {
  txt.addEventListener(event, textCounter)
})

function textCounter(e) {
  let count = txt.value.length;
  if (count > maxLength) {
    e.preventDefault(); // will stop the entry
    //txt.value = txt.value.substring(0, maxLength)
  } else if (count > warnLength) {
    message.innerHTML = `${(maxLength-count)} characters left`
  }
}

textarea {
  width: 400 px;
  height: 100 px;
}

<textarea></textarea>
<div class="message"></div>

Answer 3

просто добавьте maxlength to textarea вот так

<textarea maxlength="20"></textarea>

Answer 4

Существует атрибут тега textarea, называемый «maxlength», в котором вы можете указать максимально допустимое количество символов в текстовой области.

Просто добавьте следующую строку в ваш код:

txt.setAttribute("maxlength",maxLength);

Answer 5

Просто измените условие if:

if (count > maxLength) {
    txt.value = txt.value.substring(0, maxLength)
} else if (count > warnLength) {
    message.innerHTML = `${(maxLength-count)} characters left`
}