javascript - 子字符串方法不返回最大字符限制

Question

当字符数超过最大限制(20 个字符)时，substring 方法会返回输入中从索引 0 到 20 键入的字符。substring 方法会覆盖用户尝试键入超过 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

if (count > warnLength) { 在第 15 个字符后始终为真

• 测试 count > warnLength && count <= maxLength 会起作用
• 先测试 maxLength 会更好
• 使用 maxlength 属性将使对 maxLength 的测试变得不必要
• 如果不是，preventDefault 将停止输入:

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>