Question

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

想要的功能：

<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-但是，无法从foo函数中访问this.value。（我认为???）。

所以我尝试这样做：

<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>

Answer 2

您有两种方法可以完成所要尝试的工作：

将此 this 传递给内联函数
将 event 传递给内联函数

两者都具有相同的结果，并且将发挥您预期的作用：

<input oninput="foo(this)"/>

或

<input oninput="foo(event)"/>

那么您的功能可以是：

function foo(thisChoice) {

  if(thisChoice.value > 100) {
      thisChoice.value = 100;
   }

}

或

function foo(eventChoice) {

  if(eventChoice.target.value > 100) {
      eventChoice.target.value = 100;
   }

}

请记住，一个仅传递输入标记，而另一个则将整个Event传递给函数。

Answer 3

您的方法是正确的。

您可以直接在函数中修改元素的值，以使其更具可读性和重用性。例如：

<input type="number" min="0" max="100" oninput="limitTo(100, this)" />
<script>
  function limitTo(upperLimit, el) {
    if (el.value > upperLimit) {
      el.value = upperLimit;
    }
  }
</script>

我还建议将输入元素的type属性设置为number。优点是浏览器将确保只接受数字，并且允许设置属性max。

有没有一种方法可以从HTML

3 个答案: