Question

我有一个输入框，其编写如下：

<input id="SlidingWindow" type="number" placeholder="50" class="span3">

此输入框是表单的一部分，点击提交按钮后，我调用了一个javascript函数。我正在尝试检查输入的数字是否在范围内。如果它不在范围内，我想将框中的值设置为默认值，如下所示：

slidingWindow = document.getElementById("SlidingWindow").value;
    if (slidingWindow < 30) {
        slidingWindow = 30;     
    } else if (slidingWindow > 2000) {
        slidingWindow = 2000;       
    }
    document.getElementById("SlidingWindow").innerHTML = slidingWindow;

但是，执行此操作时，框中的文本不会更改。我没有使用innerHTML，而是尝试了价值。那也行不通。可能的解决方案是什么？

Answer 1

这里的问题是您使用 .innerHTML 来更改输入的值不正确，您必须使用 .value 来解雇此问题测试将您的代码包装到一个函数中并将其附加到onchange的{{1}}事件中，如下所示：

input

document.getElementById("SlidingWindow").onchange = function() {
  slidingWindow = document.getElementById("SlidingWindow").value;
  if (slidingWindow < 30) {
    slidingWindow = 30;     
  } else if (slidingWindow > 2000) {
    slidingWindow = 2000;       
  }
  document.getElementById("SlidingWindow").value = slidingWindow;
}

您可以测试the Working Fiddle here。

Answer 2

将innerHTML替换为value

function foo() {
    slidingWindow = document.getElementById("SlidingWindow").value;
    if (slidingWindow < 30) {
        slidingWindow = 30;     
    } else if (slidingWindow > 2000) {
        slidingWindow = 2000;       
    }
    document.getElementById("SlidingWindow").value = slidingWindow;
  }

<input id="SlidingWindow" type="number" placeholder="50" class="span3" onchange="foo()">

Answer 3

您只进行了一次更改

 document.getElementById("SlidingWindow").innerHTML = slidingWindow;

用

替换这一行

document.getElementById("SlidingWindow").value= slidingWindow;

其他方法是你可以调用函数onchange

<input id="SlidingWindow" type="number" placeholder="50" class="span3" onchange="myFunction()">

function myFunction() {
    slidingWindow = document.getElementById("SlidingWindow").value;
    if (slidingWindow < 30) {
        slidingWindow = 30;     
    } else if (slidingWindow > 2000) {
        slidingWindow = 2000;       
    }
    document.getElementById("SlidingWindow").value = slidingWindow;
  }

使用Javascript更新输入框中的文本

3 个答案: