如何为多个name属性不同的number类型输入框统一控制输入行为

解决方案 #

核心问题解答 #

完全可以按type属性筛选元素，不需要依赖name属性实现需求，以下是符合DRY原则的最优实现方案。

最优方案：事件委托（推荐） #

无需逐个选中元素绑定事件，后续动态新增的number输入框也会自动复用逻辑，性能和可维护性都更高：

// focus事件不冒泡，需在捕获阶段触发监听
document.addEventListener('focus', function(e) {
  const target = e.target;
  // 仅对number类型的输入框生效
  if (target.tagName === 'INPUT' && target.type === 'number' && target.value === '0') {
    target.value = '';
  }
}, true);

document.addEventListener('blur', function(e) {
  const target = e.target;
  if (target.tagName === 'INPUT' && target.type === 'number' && target.value === '') {
    target.value = '0';
  }
}, true);

兼容旧浏览器方案（遍历绑定） #

如果需要兼容IE8及更早版本的浏览器，可选择遍历所有number输入框绑定事件：

// 按type属性筛选所有数字输入框
var numberInputs = document.querySelectorAll('input[type="number"]');

// 兼容旧浏览器的事件绑定工具函数
function bindEvent(el, eventName, handler) {
  if (el.addEventListener) {
    el.addEventListener(eventName, handler, false);
  } else if (el.attachEvent) {
    el.attachEvent('on' + eventName, handler);
  }
}

// 批量绑定事件
for (var i = 0; i < numberInputs.length; i++) {
  bindEvent(numberInputs[i], 'focus', function(e) {
    var element = e.target || window.event.srcElement;
    if (element.value == '0') element.value = '';
  });
  bindEvent(numberInputs[i], 'blur', function(e) {
    var element = e.target || window.event.srcElement;
    if (element.value === '') element.value = '0';
  });
}

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