如何用 JS 计算 <input> 标签 HTML 中的字符数答案

【问题标题】：How to count the number of characters inside <input> tag HTML with JS如何用 JS 计算 <input> 标签 HTML 中的字符数
【发布时间】：2023-01-24 05:22:46
【问题描述】：

我正在尝试创建一个函数来计算注册表单输入标签内的字符。

document.getElementById('username').onkeyup = function() {
  document.getElementById('caratteriRimanentiUsername').innerText = "Caratteri: " + this.value.length + "/30";
};

<div class="input-box">
  <span class="details">Username</span>
  <input id="username" type="text" name="username" placeholder="Inserisci il tuo username">
  <span id="caratteriRimanentiUsername">Caratteri: 0/30</span>
</div>

在 JS 文件中还有其他使用 onkeyup 的函数，这会是个问题吗？

【问题讨论】：

在我的例子中测试了你的代码，接缝工作正常i.stack.imgur.com/OEKBR.png（这里我写“hello world”并给我 11）
一个小建议是使用element.addEventListener("keyup", () => { /* your code */ });，这可以让你同时使用多个事件。
这段代码工作正常，检查你的 html，似乎在你的设置中没有 ID 为“用户名”的输入，并且 JS 无法通过 ID 获取元素，所以你得到错误“无法将 onkeyup 设置为空”

标签： javascript html forms

【解决方案1】：

我不认为这是向节点添加事件侦听器的正确语法。另外，请确保在添加侦听器之前加载并解析了 DOM。

我认为下面的代码应该做你想做的（前提是 DOM 节点存在并且已经被解析）：

const input = document.getElementById('username');
const characterCountDisplay = document.getElementById('caratteriRimanentiUsername')
let inputLength = 0;

input.addEventListener('keyup', event => {
    inputLength = event.target.value.length
    characterCountDisplay.textContent = `Caratteri: ${inputLength}/30`
})

【讨论】：

【解决方案2】：

澄清关于.onkeyup 的问题：

如果在同一元素上再次使用，确实会出现问题：

element.onkeyup 将覆盖之前分配的 .onkeyup（甚至内联元素 onkeyup=""事件处理程序。

element.addEventListener('keyup', yourFunction) 通常是首选方式，因为它允许您将多个 eventListener 添加到同一元素（并且 remove.addEventListener 仍然允许您在需要时删除它们）。

【讨论】：

【解决方案3】：

您需要在创建输入元素后执行脚本，这可以通过将脚本放在元素之后或侦听诸如 onload 的事件来绑定您的 onkeyup 事件来完成。

<div class="input-box">
  <span class="details">Username</span>
  <input id="username" type="text" name="username" placeholder="Inserisci il tuo username">
  <span id="caratteriRimanentiUsername">Caratteri: 0/30</span>
</div>

<script>
document.getElementById('username').onkeyup = function() {
  document.getElementById('caratteriRimanentiUsername').innerText = "Caratteri: " + this.value.length + "/30";
};
</script>

【讨论】：

在这种情况下，脚本实现必须由 HTML 文件组成
这不是强制性的，只需确保在元素之后添加脚本或在 window.onload 之后运行脚本
正如目前所写，您的答案尚不清楚。请edit 添加更多详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写出好的答案的信息in the help center。