带有活动字段高亮显示和指令范围的窗体元素

Posted 2021-02-26

jQuery:
 
// hide all instructions
$('.defaultForm li > .instructions').hide();
 
function hilite(elem){
  // remove any previously selected hilite's and instructions if any
  $('.defaultForm li.selected .instructions').hide();
  $('.defaultForm li.selected').removeClass("selected");
 
  // hilite and show instructions if any
  elem.parent('li').addClass("selected");
  elem.parent('label').parent('li').addClass("selected");
  elem.siblings('.instructions').show();
  elem.parent().siblings('.instructions').show();	
}
 
 
// on focus tests for various types of form elements
var inputFocused = false;
 
// input fields
$('.defaultForm * > input').focus(function () {	
	// check to see if input field is not a button
	if( !$(this).attr("src") || $(this).attr("value") != "submit"){ 
		hilite($(this));
	}
	inputFocused = true;
});
 
// radio and checkboxes only get detected with onclick (or tab) for chrome/safari
if(!inputFocused){
	$('.defaultForm * > input').click(function () {	
		// check to see if input field is not a button
		if( !$(this).attr("src") || $(this).attr("value") != "submit"){ 
			hilite($(this));
		}	  
	});
}
 
// text areas
$('.defaultForm * > textarea').focus(function () {
  hilite($(this));	  
});
 
// select boxes
$('.defaultForm * > select').focus(function () {
  hilite($(this));	  
});
 
 
html Markup:
<form name="formExample" id="formExample" action="">
<ul class="defaultForm">
<li>
    <label for="name">Your Full Name:</label><input name="name" type="text" class="inputText onehalf" />
    <span class="required">*</span><span class="error">! Please enter your full name</span>
    <span class="instructions">Please enter your full name</span>
</li>
</ul>
</form>
 
 
CSS:
ul.defaultForm{}
ul.defaultForm li{clear:left; padding:6px 0 2px; line-height:180%;}
ul.defaultForm li.selected{background-color:#F5F5F5;}
ul.defaultForm li label{float:left; width:150px; padding-right:20px; margin-top:-2px; font-weight:normal; text-align:right;}
ul.defaultForm li label.radio,
ul.defaultForm li label.checkbox{float:none; width:auto;}
ul.defaultForm li .required{padding-left:5px;}
ul.defaultForm li .error{display:block; margin-left:170px; color:#D71111; font-weight:bold; display:none; }
ul.defaultForm li .instructions{display:block; margin-left:170px; color:#666;}
 
.onethird{width:33%;}
.fortypercent{width:40%}
.onehalf{width:50%;}
.twothirds{width:66%;}
.fullwidth{width:100%;}