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

PHP新手

我有这个输入文本：

<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 高手都知道这样做的最佳方法吗？

豪尔赫·富恩特斯·冈萨雷斯

我将参加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";
    }
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。