如何在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"&nbsp; readonly value="<?php echo $time_per_tag; ?>"&nbsp; style="background-color: <?php echo $yourColor; ?>" >

Answer 2

如果您想让输入为只读，也许不应该输入，而只是span或div？