如何使用jQuery检测表单中被点击的是number input还是textarea

嘿，这个问题其实很好解决！在你已经绑定的change事件回调里，this就代表当前触发事件的那个DOM元素，我们可以用几种方式来判断它的类型：

方式1：直接检查DOM元素的属性 #

每个元素都自带tagName和type属性，我们可以利用这两个属性来区分：

$('body').on('change', 'input textarea', function() {
  // 先判断是不是textarea
  if (this.tagName === 'TEXTAREA') {
    console.log('当前触发的是textarea哦');
    // 这里写针对textarea的处理逻辑
  } 
  // 再判断是不是number类型的input
  else if (this.tagName === 'INPUT' && this.type === 'number') {
    console.log('当前触发的是number输入框');
    // 这里写针对number input的处理逻辑
  }
});

方式2：用jQuery的is()方法简化判断 #

如果你更习惯用jQuery的API，is()方法可以直接帮你匹配选择器，代码会更简洁：

$('body').on('change', 'input textarea', function() {
  const $currentElem = $(this);
  if ($currentElem.is('textarea')) {
    console.log('这是textarea触发的事件');
  } else if ($currentElem.is('input[type="number"]')) {
    console.log('这是number输入框触发的事件');
  }
});

小提醒：注意事件类型的区别 #

你现在用的是change事件，它是在元素值改变且失去焦点时才触发的。如果你的需求是检测点击（获得焦点）的瞬间就判断元素类型，那可以把事件换成click或者focus：

// 点击或聚焦时就判断元素类型
$('body').on('click focus', 'input[type="number"], textarea', function() {
  const $elem = $(this);
  if ($elem.is('textarea')) {
    console.log('你点击/聚焦了textarea');
  } else {
    console.log('你点击/聚焦了number输入框');
  }
});

这样就能精准区分当前交互的是哪种元素啦～

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