时间戳

首页 > 解决方案 > 我可以直接从 HTML 将 HTML 元素传递给 oninput 属性中定义的函数吗？

javascript - 我可以直接从 HTML 将 HTML 元素传递给 oninput 属性中定义的函数吗？

问题描述

我正在研究一个名为 quantityLimits() 的函数，我想根据传递给它的元素重复使用和调用多次。

这些元素之一是我的 HTML 中的这个输入数字元素：

<input id="quantityInput" type="number" min=1 max=100 value=1 oninput="quantityLimits()">

这是我现在拥有的 Javascript 中的 quantityLimits() 函数：

function quantityLimits() {
  let max = parseInt(this.max);
  let quantity = parseInt(this.value);
  if (quantity > max) {
    this.value = max;
  }
  else if (quantity < 1) {
    this.value = Math.abs(this.value);
  }
}

此功能可防止用户在输入框中输入负值并输入大于定义的最大值（在我的情况下为 100）的数字。是否可以在元素的 oninput 属性中传递输入元素对象，例如我可以在 quantityLimits() 函数中使用“this”来引用该对象。

像这样的东西：

<input id="quantityInput" type="number" min=1 max=100 value=1 oninput="quantityLimits(***quantityInput***)">

标签： javascripthtmlinput

解决方案

有了 Pooshonk 的意见，答案就解决了。

HTML：

<input id="quantityInput" type="number" min=1 max=100 value=1 oninput="quantityLimits(this)">

Javascript：

function quantityLimits(element) {
  let max = parseInt(element.max);
  let quantity = parseInt(element.value);
  if (quantity > max) {
    element.value = max;
  }
  else if (quantity < 1) {
    element.value = Math.abs(element.value);
  }
}

推荐阅读