Javascript，如果值插入包含在范围内，则动态颜色 HTML 输入框答案

【问题标题】：Javascript, dynamic color HTML inputbox if value insert is included in rangeJavascript，如果值插入包含在范围内，则动态颜色 HTML 输入框
【发布时间】：2021-08-25 16:28:54
【问题描述】：

下午好，我需要检查用户在我的 PHP 页面上的输入框中插入的值是否包含在特定范围内。因此，如果值插入不包含在此范围内，我需要为输入框中的文本着色或显示一条消息。范围由两个 PHP 变量确定。

例如，如果我的范围为 >10 且

我尝试使用这样的东西：

<script>
function checkFilled() {
var inputVal = document.getElementById("myinputbox");
var min = "<?php echo $someVar2; ?>";
var max = "<?php echo $someVar3; ?>";
    
if (inputVal.value < min) {
inputVal.style.backgroundColor = "yellow";
} 
else if (inputVal.value > max) {
inputVal.style.backgroundColor = "yellow";
}    
else {
inputVal.style.backgroundColor = "";
}
}

checkFilled();
</script>

PHP：

$someVar2 = 10;
$someVar3 = 20;
echo '<input type="text" id="myinputbox" onchange="checkFilled();">';

这种方式不起作用，我在输入框中插入的所有数字都会将颜色更改为黄色。如果我尝试直接在 Javascript 中使用数字设置 min 和 max 变量（而不从 PHP 中读取变量），则脚本可以工作。

谁能帮帮我？

非常感谢您的帮助。

问候

【问题讨论】：

标签： javascript php variables range

【解决方案1】：

下午好你可以往这边走

<input type="text" id="myinputbox" oninput="myFunction()">

<script>
function myFunction() {
  var inputVal = document.getElementById("myinputbox").value;
  var min = "<?php echo $someVar2; ?>";
  var max = "<?php echo $someVar3; ?>";
  if (inputVal.value < min) {
    document.getElementById("myinputbox").style.backgroundColor = "yellow";
  } 
  else if (inputVal.value > max) {
    document.getElementById("myinputbox").style.backgroundColor = "red";
  }    
  else {
    document.getElementById("myinputbox").style.backgroundColor = "";
  }
}
</script>

你必须使用oninput事件并尝试调试你会得到它万事如意

【讨论】：