JavaScript生成含oninput的input元素问题及解决方法

目标元素 #

我们需要生成的input元素代码如下：

<input id="amount" class="amount" autocomplete="off" title="amount" value="0" oninput="updateButton();">

现有代码问题分析 #

你提供的代码有几处错误，导致无法生成完全一致的元素：

• 类名设置错误：JavaScript里不能直接用input.class，DOM元素的类名属性是className
• 多了不必要的placeholder属性，目标元素没有这个配置
• 缺少title属性的设置
• 核心问题：input.oninput = updateButton();会立即执行updateButton函数，并把函数的返回值赋值给oninput事件，而不是绑定函数本身，这就导致元素上不会出现oninput属性，也无法触发预期的事件

修正后的完整代码 #

const parent = document.getElementById('actionButtons');

let linebreak = document.createElement("br");
parent.appendChild(linebreak);

var input = document.createElement('INPUT');
input.type = 'text';
input.id = "amount";
input.className = "amount"; // 修正类名设置方式
input.autocomplete = "off";
input.title = "amount"; // 添加title属性
input.value = 0;
input.oninput = updateButton; // 去掉括号，绑定函数本身
parent.appendChild(input);

额外说明 #

如果想要更灵活的事件绑定方式，也可以使用addEventListener：

input.addEventListener('input', updateButton);

这种方式允许给同一个事件绑定多个处理函数，比直接赋值oninput的兼容性和扩展性更好。

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