如何在输入文本框时更改按钮的颜色

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

下面是代码我写::

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">

来源

2016-11-07 Beginner Kid

你需要有一些事件连接到您的文本框，并在你需要编写代码该事件。你可以在文本框上使用onChange事件 –

你需要一个事件侦听器附加到事件keyup上textBox

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>

来源

2016-11-07 07:36:22

非常感谢你的兄弟！工作就像一个魅力:) 另外，你可以请简单解释我关于** kyeup **功能？ –

@BeginnerKid'input'和其他许多元素都有这样一个叫'event'的东西。每个事件都有它的回调函数，如果这个事件被触发，这个函数将会起作用：更多信息请参见http://www.quirksmode.org/js/ introevents.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">

来源

2016-11-07 07:41:07 prasanth

您需要onChange属性附加到文本框，并分配一个函数输入的时间验证到它。该函数将被调用，只要the value in the textbox is changed。这里是codepen link。

或者，您也可以在文本框上指定eventlistener of keyup。您可以在此codepen link 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>

来源

2016-11-07 07:41:26

<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>

来源

2016-11-07 08:17:20 vasanth

如何在输入文本框时更改按钮的颜色

回答

相关问题