如何通过jQuery或JavaScript为输入框添加指定oninput事件属性？

当然可以，用原生JavaScript或jQuery都能完成这个需求，以下是具体实现方法：

原生JavaScript实现 #

方式1：直接添加oninput属性 #

通过选择器定位输入框后，直接设置它的oninput属性：

// 获取range类型的输入框（可根据实际场景调整选择器）
const rangeInput = document.querySelector('input[type="range"]');
// 添加入框同步逻辑的属性
rangeInput.setAttribute('oninput', 'this.nextElementSibling.value = this.value');

方式2：绑定input事件监听器（推荐） #

这种写法比内联属性更利于代码维护，也能避免内联脚本的潜在问题：

const rangeInput = document.querySelector('input[type="range"]');
rangeInput.addEventListener('input', function() {
  this.nextElementSibling.value = this.value;
});

jQuery实现 #

方式1：添加oninput属性 #

使用attr()方法直接设置属性：

$('input[type="range"]').attr('oninput', 'this.nextElementSibling.value = this.value');

方式2：绑定input事件（推荐） #

用事件绑定的方式更灵活，也方便后续扩展逻辑：

$('input[type="range"]').on('input', function() {
  $(this).next('output').val($(this).val());
});

补充提示 #

如果页面存在多组类似的输入框+output组合，可以给它们添加统一类名（比如给输入框加sync-range类，output加sync-output类），就能批量完成同步逻辑的绑定，无需逐个处理。

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