recherche

Maison >interface Web >js tutoriel >Comment implémenter la détection de formulaire et les invites de formulaire dans les compétences js_javascript

Comment implémenter la détection de formulaire et les invites de formulaire dans les compétences js_javascript

WBOY
WBOYoriginal
2016-05-16 15:45:031229parcourir

L'exemple de cet article décrit comment implémenter la détection de formulaire et les invites de formulaire dans js. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Il s'agit d'un jugement de formulaire pratique et d'un effet d'invite de formulaire. Si vous cliquez pour saisir du texte, l'invite apparaîtra. La forme de la boîte d'invite est plus personnalisée. Il y a un symbole triangulaire pointant vers la zone de saisie. deux photos à télécharger.

L'effet de l'opération est comme indiqué ci-dessous :

L'adresse de la démo en ligne est la suivante :

http://demo.jb51.net/js/2015/js-table-check-form-tips-codes/

Le code spécifique est le suivant : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>表单检测及表单提示</title>
<style type="text/css">
dl {
font:normal 12px/15px Arial;
position: relative;
width: 350px;
}
dt {
 clear: both;
 float:left;
 width: 130px;
 padding: 4px 0 2px 0;
 text-align: left;
}
dd {
 float: left;
 width: 200px;
 margin: 0 0 8px 0;
 padding-left: 6px;
}
.hint {
 display: none;
 position: absolute;
 right: -250px;
 width: 200px;
 margin-top: -4px;
 border: 1px solid #c93;
 padding: 10px 12px;
 background: #ffc url("images/pointer.gif") no-repeat -10px 5px;
}
.hint .hint-pointer {
 position: absolute;
 left: -10px;
 top: 5px;
 width: 10px;
 height: 19px;
 background: url("images/pointer.gif") left top no-repeat;
}
</style>
<script type="text/javascript">
function addLoadEvent(func) {
 var oldonload = window.onload;
 if (typeof window.onload != 'function') {
 window.onload = func;
 } else {
 window.onload = function() {
  oldonload();
  func();
 }
 }
}
function prepareInputsForHints() {
 var inputs = document.getElementsByTagName("input");
 for (var i=0; i<inputs.length; i++){
  if (inputs[i].parentNode.getElementsByTagName("span")[0]) {
   inputs[i].onfocus = function () {
    this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
   }
   inputs[i].onblur = function () {
    this.parentNode.getElementsByTagName("span")[0].style.display = "none";
   }
  }
 }
 var selects = document.getElementsByTagName("select");
 for (var k=0; k<selects.length; k++){
  if (selects[k].parentNode.getElementsByTagName("span")[0]) {
   selects[k].onfocus = function () {
    this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
   }
   selects[k].onblur = function () {
    this.parentNode.getElementsByTagName("span")[0].style.display = "none";
   }
  }
 }
}
addLoadEvent(prepareInputsForHints);
</script>
</head>
<body>
<p style="font:normal 12px/15px Arial;">Tab or click through the fields to reveal the hints.</p>
<dl>
 <dt>
  <label for="firstname">First Name:</label>
 </dt>
 <dd>
  <input name="firstname" id="firstname" type="text" />
  <span class="hint">This is the name your mama called you when you were little.<span class="hint-pointer"> </span></span>
 </dd>
 <dt>
  <label for="lastname">Last Name:</label>
 </dt>
 <dd>
  <input name="lastname" id="lastname" type="text" />
  <span class="hint">This is the name your sergeant called you when you went through bootcamp.<span class="hint-pointer"> </span></span>
 </dd>
 <dt>
  <label for="email">Email:</label>
 </dt>
 <dd>
  <input name="email" id="email" type="text" />
  <span class="hint">The thing with the @ symbol and the dot com at the end.<span class="hint-pointer"> </span></span>
 </dd>
 <dt><label for="year">Birth Year:</label></dt>
 <dd>
  <select id="year" name="year">
   <option value="">YYYY</option>
   <option value="1066">1066</option>
   <option value="1492">1492</option>
   <option value="1776">1776</option>
  </select>
  <span class="hint">Pick a famous year to be born in.<span class="hint-pointer"> </span></span>
 </dd>
 <dt>
  <label for="username">Username:</label>
 </dt>
 <dd>
  <input name="username" id="username" type="text" />
  <span class="hint">Between 4-12 characters.<span class="hint-pointer"> </span></span>
 </dd>
 <dt>
  <label for="password">Password:</label>
 </dt>
 <dd>
  <input name="password" id="password" type="password" />
  <span class="hint">Between 5-13 characters, but not 7. Never 7.<span class="hint-pointer"> </span></span>
 </dd>
 <dt class="button"> </dt>
 <dd class="button">
  <input
   type="submit"
   class="button"
   value="Submit" />
 </dd>
</dl>
</body>
</html>

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment déterminer le type de données des variables dans les connaissances JavaScript_BasicArticle suivant：Comment déterminer le type de données des variables dans les connaissances JavaScript_Basic

Articles Liés

Voir plus