JavaScript oninput事件函数失效原因排查 附字符计数实现场景

核心错误原因 #

• 事件绑定对象完全错配
  代码中$maxlength = $textarea.getAttribute("maxlength")获取到的是textarea元素上maxlength属性的字符串值（示例场景下即为字符串"100"），不属于可监听DOM事件的元素对象。原本应该绑定到textarea输入元素的input事件，被错绑到了这个代表长度值的字符串变量上——字符串本身不具备DOM事件响应能力，对应的处理函数自然永远不会在用户输入时被触发。
• 存在类型不匹配的计算隐患
  即便修正了绑定对象的问题，当前获取的maxlength值为字符串类型，直接和输入字符长度做减法时会触发JavaScript隐式类型转换，在部分边界场景下会出现计算结果异常。

修正后的可运行代码 #

// 获取对应DOM元素
const $count = document.getElementById("count");
const $textarea = document.getElementById("text");
// 获取数字类型的最大可输入长度，避免隐式转换带来的异常
const maxInputLength = Number($textarea.getAttribute("maxlength"));

// 将oninput事件绑定到实际的textarea元素上
$textarea.oninput = function() {
    // 实时计算剩余可输入字数并更新展示
    const remainCount = maxInputLength - this.value.length;
    $count.innerHTML = remainCount;
};

补充说明 #

当前HTML中<script>标签放置在<body>闭合标签前的位置是合理的，此时页面DOM元素已经完成加载，document.getElementById可以正常获取到对应元素，不存在DOM未加载导致的元素获取失败问题。

内容的提问来源于stack exchange，提问作者Mohamed Yehia