0
我的聽衆知識是新的。我明白他們是如何設置的，但不是100％。我正在研究一個需要偵聽器的基本項目，以便在提交空白表單時突出顯示紅色的文本框。將文本輸入到框中後，紅色框將消失。我相信我有一切設置，但聽衆。隨時糾正，如果我錯了，但即時通訊尋找協助與幾個步驟。我知道，即時通訊關閉或至少覺得這是我不明白的唯一一步：如何使用監聽器突出顯示<form>中的空白字段？
在窗體的提交事件上設置一個偵聽器，以便代碼防止提交窗體（preventDefault（）），如果標題或說明字段留空或接受許可證框未被選中，但以其他方式提交表單。
增強JavaScript，使空白字段觸發表單的外觀 （使用前面定義的樣式）的更改。
將另一個偵聽器添加到字段中，以便當用戶鍵入字段 （更改的事件）時JavaScript會刪除剛添加的紅色。
這裏是我的代碼：
function isBlank(inputField){
if(inputField.type=="checkbox"){
\t if(inputField.checked)
\t return false;
\t return true;
}
if (inputField.value==""){
\t return true;
}
return false;
}
function makeRed(inputDiv){
\t inputDiv.style.backgroundColor="#AA0000";
\t inputDiv.parentNode.style.backgroundColor="#AA0000";
\t inputDiv.parentNode.style.color="#FFFFFF"; \t \t
}
function makeClean(inputDiv){
\t inputDiv.parentNode.style.backgroundColor="#FFFFFF";
\t inputDiv.parentNode.style.color="#000000"; \t \t
}
window.onload = function(){
var mainForm = document.getElementById("mainForm");
var requiredInputs = document.querySelectorAll(".required");
for (var i=0; i < requiredInputs.length; i++){
\t requiredInputs[i].onfocus = function(){
\t this.style.backgroundColor = "#EEEE00";
\t }
}
mainForm.onsubmit = function(e){
\t var requiredInputs = document.querySelectorAll(".required");
\t for (var i=0; i < requiredInputs.length; i++){
\t if(isBlank(requiredInputs[i])){
\t \t e.preventDefault();
\t \t makeRed(requiredInputs[i]);
\t }
\t else{
\t \t makeClean(requiredInputs[i]);
\t }
\t }
}
}/* general text formatting */
h1, h2, h3, nav, footer {
font-family: Georgia, Cambria, "Times New Roman", serif;
}
body {
font-family: "Lucida Sans", Verdana, Arial, sans-serif;
font-size: 85%;
}
table {
border-collapse: collapse;
border-spacing: 0;
width: 90%;
margin: 0 auto;
}
table tbody td{
/* border: 1pt solid #95BEF0; */
line-height: 1.5em;
vertical-align: top;
padding: 0.5em 0.75em;
}
legend {
background-color: #EBF4FB ;
margin: 0 auto;
width: 90%;
padding: 0.25em;
text-align: center;
font-weight: bold;
font-size: 100%;
}
fieldset {
margin: 1em auto;
background-color: #FAFCFF;
width: 60%;
}
form p {
margin-top: 0.5em;
}
.box {
border: 1pt solid #95BEF0;
padding: 0.5em;
margin-bottom: 0.4em;
}
.rectangle {
background-color: #EBF4FB;
padding: 0.5em;
}
.centered {
text-align: center;
}
.rounded, .rounded:hover {
border: 1px solid #172d6e;
border-bottom: 1px solid #0e1d45;
border-radius: 5px;
text-align: center;
color: white;
background-color: #8c9cbf;
padding: 0.5em 0 0.5em 0;
margin: 0.3em;
width: 7em;
-webkit-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 4px 0 #b3b3b3;
box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 4px 0 #b3b3b3;
}
.rounded:hover {
background-color: #7f8dad;
}<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Chapter 6</title>
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="css/Lab5.css" />
<script type="text/javascript" src="script/Lab5.js"></script>
</head>
<body>
<!-- <form method="get" action="" id="mainForm"> "Your original line of code replaced with your line of code from Lab 4 -->
<form method="get" action="http://www.randyconnolly.com/tests/process.php">
<fieldset>
<legend>Photo Details</legend>
<table>
<tr>
<td colspan="2">
<p>
<label>Title</label><br/>
<input type="text" name="title" size="80" class="required" />
</p>
<p>
<label>Description</label><br/>
<textarea name="description" rows="5" cols="61" class="required">
</textarea>
</p>
</td>
</tr>
<tr>
<td>
<p>
<label>Continent</label><br/>
<select name="continent">
<option>Choose continent</option>
<option>Africa</option>
<option>Asia</option>
<option>Europe</option>
<option>North America</option>
<option>South America</option>
</select>
</p>
<p>
<label>Country</label><br/>
<select name="country">
<option>Choose country</option>
<option>Canada</option>
<option>Mexico</option>
<option>United States</option>
</select>
</p>
<p>
<label>City</label><br/>
<input type="text" name="city" list="cities" size="40"/>
<datalist id="cities">
<option>Calgary</option>
<option>Montreal</option>
<option>Toronto</option>
<option>Vancouver</option>
</datalist>
</p>
</td>
<td>
<div class="box">
<label>Copyright? </label><br/>
<input type="radio" name="copyright" value="1">All rights reserved<br/>
<input type="radio" name="copyright" value="2" checked>Creative Commons<br/>
</div>
<div class="box">
<label>Creative Commons Types </label><br/>
<input type="checkbox" name="cc" >Attribution <br/>
<input type="checkbox" name="cc" >Noncommercial <br/>
<input type="checkbox" name="cc" >No Derivative Works <br/>
<input type="checkbox" name="cc" >Share Alike
</div>
</td>
</tr>
<tr>
<td colspan="2" >
<div class="rectangle">
<label>I accept the software license</label>
<input type="checkbox" name="accept" class="required">
</div>
</td>
</tr>
<tr>
<td>
<p>
<label>Rate this photo: </label><br/>
<input type="number" min="1" max="5" name="rate" />
</p>
<p>
<label>Color Collection: </label><br/>
<input type="color" name="color" />
</p>
</td>
<td>
<div class="box">
<p>
<label>Date Taken: </label><br/>
<input type="date" name="date" />
</p>
<p>
<label>Time Taken: </label><br/>
<input type="time" name="time" />
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="rectangle centered">
<input type="submit" class="rounded"> <input type="reset" value="Clear Form" class="rounded">
</div>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
在開始使用JavaScript之前，您需要切換'
你只是想突出一個空白字段？如果是這樣，它可以在
不幸的是，我需要在這一個上使用javascript。我對聽衆和事件的理解很少。我得到他們做什麼我只是不知道如何使用它們，如果我是前面 – stangbass08