个人中心
gpt4 book ai didi

javascript - 如何使用监听器突出显示
中的空白字段？

转载 作者：行者123 更新时间：2023-11-28 05:42:41 25 4
gpt4 key购买 nike

我对听众的认识是新的。我了解它们的用途，但不是 100% 了解如何设置它们。我正在做一个需要监听器的基本元素，这样当提交空白表单时，它会将文本框突出显示为红色。当在框中键入文本时，红色框将消失。我相信除了听众之外我已经准备好了一切。如果我错了，请随时纠正，但我正在通过几个步骤寻求帮助。我知道我很接近或至少觉得这是我还不太了解的唯一步骤:

在表单的提交事件上设置一个监听器，以便代码在标题或描述字段留空或未选中接受许可框时阻止提交表单 (preventDefault())，否​​则提交表单.

增强 JavaScript，使空白字段触发外观变化形式的(使用前面定义的样式)。

向字段添加另一个监听器，以便在用户键入字段时(已更改的事件)JavaScript 删除了您刚刚添加的红色。

这是我的代码:

function isBlank(inputField){
    if(inputField.type=="checkbox"){
	if(inputField.checked)
	    return false;
	return true;
    }
    if (inputField.value==""){
	return true;
    }
    return false;
}

function makeRed(inputDiv){
   	inputDiv.style.backgroundColor="#AA0000";
	inputDiv.parentNode.style.backgroundColor="#AA0000";
	inputDiv.parentNode.style.color="#FFFFFF";		
}
function makeClean(inputDiv){
	inputDiv.parentNode.style.backgroundColor="#FFFFFF";
	inputDiv.parentNode.style.color="#000000";		
}

window.onload = function(){
    var mainForm = document.getElementById("mainForm");
    var requiredInputs = document.querySelectorAll(".required");
    for (var i=0; i < requiredInputs.length; i++){
	requiredInputs[i].onfocus = function(){
	    this.style.backgroundColor = "#EEEE00";
	}
    }
    mainForm.onsubmit = function(e){
	var requiredInputs = document.querySelectorAll(".required");
	for (var i=0; i < requiredInputs.length; i++){
	    if( isBlank(requiredInputs[i]) ){
		e.preventDefault();
		makeRed(requiredInputs[i]);
	    }
	    else{
		makeClean(requiredInputs[i]);
	    }
	}
    }
}
/* 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>

最佳答案

提交时(object 是您的表单):

object.onsubmit = function(){
    //things you want to happen on form submit
};

为了监听输入(object 是一个输入字段)，试试这个:

object.oninput = function(){
    //things that happen during input
};

PS:使用 jQuery 会容易得多。

关于javascript - 如何使用监听器突出显示 <form> 中的空白字段？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37775610/

25 4 0
文章推荐： c++ - 加速 C++ : Undefined symbols for architecture x86_64
文章推荐： c++ - 如何将 vector 和 push_back() 格式化为其他 vector ？
文章推荐： swift - 音频在模拟器中播放，但不在设备上播放
文章推荐： c++ - 当许多单元格同时可见时，QTableView 滚动缓慢
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com