如何:当输入给文本框时，更改按钮的颜色

How to: Change color of button when an input is given to a textbox

本文关键字：按钮 颜色 输入 文本 如何      更新时间：2023-09-26

刚学JS就被卡在这里了

我有一个文本框和一个按钮。每当有人在文本框中提供值时，我希望按钮的颜色改变(例如红色)。当文本框保持为空时，按钮的颜色将保持其初始颜色状态。

下面是我写的代码::

HTML:: 

    var text1 = document.getElementById("input1");
    var butt1 = document.getElementById("button1");
    
    if (text1.value == null || text1.value == "") {
      butt1.style.backgroundColor = "white";
    }
    else {
      butt1.style.backgroundColor = "#F22613";
    }
    #button1 {
      height: 20px;
      width: 100px;
      }
<input type="text" id="input1" value="xyz">
      <button type="submit" id="button1">

您需要为textBox上的事件keyup附加一个事件侦听器

var text1 = document.getElementById("input1");
var butt1 = document.getElementById("button1");
text1.addEventListener('keyup', function(){
  if (text1.value == null || text1.value == "") {
    butt1.style.backgroundColor = "white";
  }
  else {
    butt1.style.backgroundColor = "#F22613";
  }
});
#button1 {
  height: 20px;
  width: 100px;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<input type="text" id="input1" value="xyz">
  <button type="submit" id="button1" >
</body>
</html>

我用oninput创建了函数，它将在输入时验证

function input(){
  var text1 = document.getElementById("input1");
var butt1 = document.getElementById("button1");
if (text1.value == null || text1.value == "") {
  butt1.style.backgroundColor = "white";
}
else {
  butt1.style.backgroundColor = "#F22613";
}
}
#button1 {
  height: 20px;
  width: 100px;
  }
<input type="text" id="input1" value="xyz" oninput="input()">
  <button type="submit" id="button1">

<html>
    <head>
    <title>Enter Press Test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">
    window.onload = function(){
        var text1 = document.getElementById("input1");
    var butt1 = document.getElementById("button1");
    text1.addEventListener('keyup', function(){
      if (text1.value == null || text1.value == "") {
        butt1.style.backgroundColor = "";
      }
      else {
        butt1.style.backgroundColor = "#F22613";
      }
    });
    };
    </script>
    </head>
    <body>
     <input type="text" id="input1" value="">
     <button type="submit" id="button1">Submit</button>

   </body>
   </html>

您需要将onChange属性附加到文本框中并为其分配函数。函数将被调用，每当the value in the textbox is changed。这是相互依存的链接

或者，您也可以在文本框上指定eventlistener of keyup。你可以在这个相互依存的链接2中找到解决方案。

function myFunction(){
  var text1 = document.getElementById("input1");
var butt1 = document.getElementById("button1");
  if (text1.value == null || text1.value == "") {
    butt1.style.backgroundColor = "white";
  }
  else {
    butt1.style.backgroundColor = "red";
  }
}
#button1 {
  height: 20px;
  width: 100px;
  }
<input type="text" id="input1" value="xyz" onchange="myFunction()">
<button type="submit" id="button1">Something</button>

相关文章：