Question

我有这个输入文字：

<div class="form-group">
    <label for="newPrice">New Price</label>
    <input type="text" class="form-control" id="newPrice" name="newPrice" placeholder="New price">
</div>

我想在用户输入时动态更改输入的边框，具体取决于值。

此值将是基于先前定义的金额的百分比，该金额将根据用户添加的值而变化。

因此，如果该值低于5％，则在5-10％之间为红色，为琥珀色，超过10％为绿色等。

任何JavaScript高手都知道最好的方法吗？

Answer 1

我将参加2场比赛。第一个是input，但是contenteditable元素不会在IE11上触发输入事件，所以我也会在keypress时超时。

在用户输入内容并更改值后，

input将被立即触发。在用户输入内容之后，keypress会在值之间发生变化时触发。

通过这种方式，您可以覆盖所有现代和旧版浏览器（由于addEventListener而限制）：

var tim = null;
var el = document.getElementById("newPrice");
el.addEventListener("keypress", function() {
    tim = setTimeout(input, 0);
});
el.addEventListener("input", function input() {
    clearTimeout(tim);
    // do whatever you want with el.value
    if (el.value == "BLAH") {
        el.style.backgroundColor = "red";
    } else if (parseInt(el.value) > 10) {
        el.style.backgroundColor = "green";
    } else if (parseInt(el.value) < -12) {
        el.style.backgroundColor = "whizzeblue";
    }
});

Answer 2

使用focusout。在代码段验证中不会应用。

＆＃13;

$("#newPrice")
  .focusout(function() {
    var price = $(this).val();
    if (parseInt(price) <= 5) {
      $(this).removeClass('green');
      $(this).removeClass('blue');
      $(this).addClass('red');
    }
    if (parseInt(price) > 5 && parseInt(price) <= 10) {
      $(this).removeClass('red');
      $(this).removeClass('blue');
      $(this).addClass('green');
    }
    if (parseInt(price) > 10) {
      $(this).removeClass('green');
      $(this).removeClass('red');
      $(this).addClass('blue');
    }
  });

＆＃13;

.red {
  border: solid 2px red;
}

.green {
  border: solid 2px green;
}

.blue {
  border: solid 2px blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label for="newPrice">New Price</label>
  <input type="text" class="form-control" id="newPrice" name="newPrice" placeholder="New price">
</div>

＆＃13;

根据输入的值更改此输入文本的颜色

3 个答案: