子字符串方法不返回最大字符限制答案

【问题标题】：Substring method not returning max character limit子字符串方法不返回最大字符限制
【发布时间】：2020-02-01 21:52:46
【问题描述】：

当字符数超过最大限制（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>

【问题讨论】：

标签： javascript html character counting

【解决方案1】：

您可以只设置<textarea> 的maxlength 属性并完全消除代码的子字符串部分。

const textarea = document.querySelector('textarea');
const message = document.querySelector('.message');
const max = textarea.getAttribute('maxlength');
const warn = 15;
const textCounter = () => {
  const count = textarea.value.length;
  if (count > warn) {
    message.innerHTML = `${(max - count)} characters left`;
  } else if (count <= warn) {
    message.innerHTML = '';
  }
};

textarea.addEventListener('input', textCounter);

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

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

【讨论】：

卫生部。没想到:)

【解决方案2】：

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

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

txt.setAttribute("maxlength",maxLength);

【讨论】：

【解决方案3】：

if (count > warnLength) { 在 char 15 之后始终为真

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

【讨论】：

【解决方案4】：

只需像这样添加 maxlength tom textarea

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

【讨论】：

【解决方案5】：

只需反转 if 条件：

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

【讨论】：

很高兴听到:) 因为在您的情况下，count > warnLength 条件将始终首先应用，并且它会跳过 else if。
我移动了你的测试