0
リスナーに対する私の知識は新しいものです。私は彼らが何をしているのか理解していますが、それを設定する方法は100％ではありません。私は空のフォームが提出されたときにテキストボックスを強調表示するように、リスナーを必要とする基本的なプロジェクトに取り組んでいます。テキストがボックスに入力されると、赤いボックスは消えます。私はすべてのセットアップがリスナーを持っていると信じています。私は間違っているが、カップルのステップで援助を探していたら訂正してください。リスナーを使用して<form>の空白フィールドを強調表示するにはどうすればよいですか？
フォームのサブミットイベントにリスナーを設定することで、フォームがsubmitDefault（）のフォームの送信を妨げないようにすることができます（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に入る前に、 '
空白のフィールドを強調表示したいですか？その場合は、
私は残念なことに、この1つでjavascriptを使用する必要があります。リスナーとイベントの私の理解は最小限です。私は彼らが何をするか私はちょうど前になっている場合、それらを使用する方法がわからない – stangbass08