onkeydown / onkeypress html and javascript
Question
it has been a month since i have started web languages (HTML, javascript, PHP) and today i am asked to create a subscription page.... i was able to change the color of an input text box into red if the mandatory field was empty, problem is : i want it to be white again when i click on a key when i type something in it... here is my test code (a little program to understand how certain commands work):
<HTML>
<BODY>
<SCRIPT>
function check()
{
var value;
value = document.test.Secondary_Key.value;
if (value.length < 1)
{
document.getElementById("Secondary_Key").style.backgroundColor = "red";
}
}
</SCRIPT>
<SCRIPT>
function colorbox()
{
var values;
values = document.test.Secondary_key.value;
if (values.length > 0)
document.getElementById("Secondary_Key").style.backgroundColor = "white";
}
</SCRIPT>
<FORM name = test>
<TABLE>
<TR>
<TD align = right>Secondary key<input type="text" size="35" maxlength="256" name="Secondary_Key" value="" id="Secondary_Key" onkeydown="colorbox();"></TD>
</TR>
<TR>
<TD align = right>FIRST<input type="text" size="35" maxlength="256" name="FIRST" value="" id="FIRST"></TD>
</TR>
<TR>
<TD align = center><BUTTON NAME="submit" VALUE="Submit" TYPE="button" id="Submit" onclick="check();">Submit</BUTTON></TD>
</TABLE>
</FORM>
</BODY>
</HTML>
3 answers
solution1
1 2014-10-03 12:37:16
The issue why your code is not working is because in the second function colorbox , you have Secondary_key instead of Secondary_Key . Look at the capital K .
solution2
0 2014-10-03 12:32:28
I know your code snippet is JS only but you put Jquery as tag so I will answer like so :
$('#Secondary_Key').keyup(function(e){
if($(this).val()!=''){
$(this).css({'background-color':'#fff'});
}else{
$(this).css({'background-color':'#f00'});
}
});
solution3
0 2014-10-03 12:37:11
function check() { var value =
document.getElementById("Secondary_Key").value;
if (value == "") {
document.getElementById("Secondary_Key").style.backgroundColor = "red";
}
else{
document.getElementById("Secondary_Key").style.backgroundColor = "white";
} } check();
fiddle -> http://jsfiddle.net/2Xgfr/14/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.