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之后始终为真

测试计数> warnLength &&计数<= 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>

Answer 2

您可以只设置maxlength的{{1}}属性，并完全消除代码的子字符串部分。

<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;
}

Answer 3

只需反转if条件：

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

Answer 4

有一个名为“ maxlength”的textarea标签属性，您可以在其中指定文本区域中允许的最大字符数。

只需在代码中添加以下行：

txt.setAttribute("maxlength",maxLength);

Answer 5

只需添加maxlength tom textarea这样的

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

子字符串方法未返回最大字符数限制

5 个答案: