如何在php的动态值的基础上改变输入文本字段的背景颜色？

Question

我试图根据来自数据库或其他页面的动态浮点值更改输入字段的背景颜色。

代码示例：

<div>
    <input type="text"  readonly value="<?php echo $time_per_tag; ?>"  data-ranges='[[1, 14, "#BEFB93"], [15, 16, "#FDEB99"], [17, 17.5, "#FEBE5C"], [18, 100, "#FB9090"]]' onkeyup="checkFilled(event);">
</div>

输出：

这里$ time_per_tag是包含float中数据库值的变量。现在，如果值介于（1-14）之间，背景颜色将为绿色（＃BEFB93），如果介于（15-16）之间，则为黄色（＃FDEB99），依此类推......

JS：

  function checkFilled(event) {

              var inputVal = event.target;
              var inputData = JSON.parse(inputVal.dataset.ranges);
              var color = "";

              for (i = 0; i < inputData.length; i++) {
                if (inputVal.value >= inputData[i][0] && inputVal.value <= inputData[i][1]) {
                  color = inputData[i][2];
                  break;
                }
              }

              inputVal.style.backgroundColor = color;
            }

问题是我不想输入用户可编辑的内容。只读目的。但如果我这样做，代码可能无法正常工作。我希望像没有onkeyup的代码工作。

任何建议，代码修改和实施都非常感谢。

Answer 1

只需在style属性中添加颜色：

<input type="text"
  readonly value="<?php echo $time_per_tag; ?>"
  style="background-color: <?php echo $yourColor; ?>" >

Answer 2

如果你想让输入只读，也许它不应该输入但只是span或div？