如何在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？