javascript - 有没有办法从 HTML 中的函数调用中访问 this.value (输入的)

Question

我有一个 HTML 输入，我想在手动输入时将其限制为 100，我有一个最小值和一个最大值，这样如果他们使用微调器(向上和向下箭头)，它就已经限制了它。为此，我想调用一个可用于整个 HTML 文件中多个函数的函数，而不是使用内联 Javascript。

想要的功能:

<input id="..." oninput="foo()">
...
<script>
function foo() {
   if(this.value > 100) {
      this.value = 100;    // If the inputted value is 99, do nothing, if it's 999, change it to 100
   }
}
</script> 

我想要一个这样的功能，它可以让我得到 this.value - 但是 - this.value 无法从 foo 函数内访问(我认为？？？)。

所以我尝试这样做:

<input id="..." oninput="foo(this.value)">
...
<script>
function foo(value) {
   if(value > 100) {
      value = 100;
   }
}
</script>

但我认为只有值的“副本”更改为 100，而不是实际值。所以我可以通过返回这样的值来做到这一点:

<input id="..." oninput="this.value = foo(this.value)">
...
<script>
function foo(value) {
   if(value > 100) {
      value = 100;
   }
   return value;
}
</script>

但是这段代码看起来很笨拙，有更好的方法吗？

编辑:已解决!谢谢大家的回答，这是我的代码!我还解析输入以确保它只是数字，没有“e”或“.”。因为我关心的只是整数。

<input id="area-level-input" type="number" value="1" min="1" max="100" oninput="limitInput.call(this, 100)" onkeydown="isValidNumberEntry()">

各自的功能在哪里:

function limitInput(limit) {
    if(this.value > limit) {
        this.value = limit;
    }
}


function isValidNumberEntry() {
    // keyCode 8: Backspace; keyCode 46: Delete
    return (event.keyCode === 8 || event.keyCode === 46) ? true : !isNaN(Number(event.key));
}

Answer 1

您可以使用call method :

<input id="..." oninput="foo.call(this)">
...
<script>
function foo() {
   if(this.value > 100) {
      this.value = 100;    // If the inputted value is 99, do nothing, if it's 999, change it to 100
   }
}
</script>