Comprendre les bases de JavaScript Forms_Javascript Tips-js tutoriel-php.cn

Comprendre les bases de JavaScript Forms_Javascript Tips

WBOY

Libérer： 2016-05-16 15:18:27

original

1286 Les gens l'ont consulté

HTMLFormElement hérite de HTMLElement, et ses propriétés et méthodes uniques sont :

acceptCharset : Le jeu de caractères que le serveur peut gérer, équivalent à la fonctionnalité accept-charset du HTML
action : L'URL pour recevoir la requête, qui est équivalente à la fonctionnalité d'action en HTML.
éléments : une collection de tous les contrôles du formulaire (HTMLCollection)
enctype : type d'encodage demandé
longueur : le nombre de contrôles dans le formulaire
méthode : Le type de requête HTTP à envoyer, généralement obtenir ou publier
nom : le nom du formulaire
reset() : Réinitialise tous les champs du formulaire aux valeurs par défaut
submit() : Soumettre le formulaire
cible : nom de la fenêtre utilisée pour envoyer des requêtes et recevoir des réponses

Obtenir la référence de l'élément de formulaire peut être getElementById, ou il peut s'agir de l'index numérique ou de la valeur du nom dans document.forms

1. Soumettez le formulaire

Il existe trois types de boutons pour soumettre des formulaires :

<input type="submit" value="Submit Form">
<button type="submint">Submit Form</button>
<input type="image" src="">

Copier après la connexion

La soumission du formulaire dans la méthode ci-dessus déclenchera l'événement de soumission avant que la demande du navigateur ne soit envoyée au serveur, afin que les données du formulaire puissent être vérifiées et que le formulaire soumis puisse être déterminé. Par exemple, le code suivant peut empêcher le formulaire. formulaire d'être soumis :

var form = document.getElementById("myForm");
form.addEventListener("submit", function () {
  event.preventDefault();
});

Copier après la connexion

De plus, vous pouvez également soumettre le formulaire en appelant la méthode submit() via un script js. L'appel de submit() pour soumettre le formulaire ne déclenchera pas l'événement de soumission.

var form = document.getElementById("myForm");
form.submit();

Copier après la connexion

S'il n'y a pas de réponse pendant une longue période après avoir soumis le formulaire pour la première fois, les utilisateurs deviendront impatients et cliqueront souvent plusieurs fois sur le bouton Soumettre, ce qui entraînera la soumission répétée du formulaire. Par conséquent, le bouton Soumettre doit être désactivé. ou utilisez onsubmit après avoir soumis le formulaire pour la première fois. L'événement empêche les actions ultérieures.

var submitBtn = document.getElementById("submitBtn");
submitBtn.onclick = function () {
  //处理表格和提交等等
  submitBtn.disabled = true;
};

Copier après la connexion

2. Réinitialiser le formulaire

Le formulaire de réinitialisation doit utiliser une saisie ou un bouton :

<input type="reset" value = "Reset Form">
<button type="reset">Reset Form</button>

Copier après la connexion

Lorsque l'utilisateur clique sur le bouton de réinitialisation pour réinitialiser le formulaire, l'événement de réinitialisation sera déclenché et l'opération de réinitialisation pourra être annulée si nécessaire :

var resetBtn = document.getElementById("resetBtn");
resetBtn.addEventListener("reset", function () {
  event.preventDefault();
});

Copier après la connexion

De plus, vous pouvez également réinitialiser le formulaire en appelant la méthode reset() via un script js. Lorsque la méthode reset() est appelée pour réinitialiser le formulaire, l'événement reset sera déclenché.

var form = document.getElementById("myForm");
form.reset();

Copier après la connexion

3. Champs du formulaire

Chaque formulaire possède un attribut d'éléments, qui est une collection de tous les formulaires (champs) du formulaire :

var form = document.forms["myForm"];
var list = [];
//取得表单中第一个字段
var firstName = form.elements[0];
list.push(firstName.name);
//取得表单中名为lastName的字段
var lastName = form.elements["lastName"];
list.push(lastName.name);
// 取得表单中包含的字段的数量
var fieldCount = form.elements.length;
list.push(fieldCount);
console.log(list.toString()); //firstName,lastName,4

Copier après la connexion

Si plusieurs contrôles de formulaire utilisent un seul nom (bouton radio), une NodeList nommée d'après ce nom sera renvoyée :

<form id="myForm" name="myForm">
  <ul>
    <li><input type="radio" name="color" value="red">red</li>
    <li><input type="radio" name="color" value="yellow">yellow</li>
    <li><input type="radio" name="color" value="blue">blue</li>
  </ul>
  <button type="submint">Submit Form</button>
  <button type="reset">Reset Form</button>
</form>

Copier après la connexion

les noms sont tous en couleur. Lors de l'accès aux éléments["color"], NodeList est renvoyé :

var list = [];
var form = document.forms["myForm"];
var radios = form.elements["color"];
console.log(radios.length) //3

Copier après la connexion

Attributs courants des champs de formulaire

disabled : valeur booléenne, indiquant si le champ actuel est désactivé
formulaire : pointeur vers le formulaire auquel appartient le champ courant : lecture seule ;
nom : le nom du champ actuel
readOnly : valeur booléenne, indiquant si le champ actuel est en lecture seule ;
tabIndex : indique le numéro de commutation (onglet) du champ actuel
type : le type du champ actuel
value : La valeur du champ actuel soumis au serveur. Pour les champs de fichiers, cet attribut est en lecture seule et contient le chemin du fichier sur l'ordinateur
;

Le bouton de soumission peut être désactivé après la soumission du formulaire via l'événement submit, mais l'événement onclick ne peut pas être utilisé car il existe un "décalage horaire" dans onclick dans différents navigateurs

Méthodes de champs de formulaire partagés

focus() : active le champ pour qu'il puisse répondre aux événements du clavier ;
blur() : perd la concentration et se déclenche rarement ;

Vous pouvez ajouter la méthode focus() sur l'événement load de la page d'écoute :

window.addEventListener("load", function () {
  document.forms["myForm"].elements["lastName"].focus();
});

Copier après la connexion

需要注意，第一个表单字段是input，如果其type特性为“hidden”，或者css属性的display和visibility属性隐藏了该字段，就会导致错误。

在HTML5中，表单中新增加了autofocus属性，自动把焦点移动到相应字段。

autofocus
如：

<input type="text" name="lastName" autofocus>

Copier après la connexion

或者检测是否设置了该属性，没有的话再调用focus()方法：

window.addEventListener("load", function () {
  var form = document.forms["myForm"];
  if (form["lastName"].autofocus !== true) {
    form["lastName"].focus();
  };
});

Copier après la connexion

共有的表单字段事件

除了支持鼠标键盘更改和HTML事件之外，所有的表单字段都支持下列3个事件：

blur： 当前字段失去焦点时触发；
change：input元素和textarea元素，在它们失去焦点且value值改变时触发；select元素在其选项改变时触发（不失去焦点也会触发）；
focus：当前字段获得焦点时触发；
如：

var form = document.forms["myForm"];
var firstName = form.elements["firstName"];

firstName.addEventListener("focus", handler);
firstName.addEventListener("blur", handler);
firstName.addEventListener("change", handler);

function handler() {
  switch (event.type) {
    case "focus":
      if (firstName.style.backgroundColor !== "red") {
        firstName.style.backgroundColor = "yellow";

      };
      break;
    case "blur":
      if (event.target.value.length < 1) {
        firstName.style.backgroundColor = "red";
      } else {
        firstName.style.backgroundColor = "";
      };
      break;
    case "change":
      if (event.target.value.length < 1) {
        firstName.style.backgroundColor = "red";
      } else {
        firstName.style.backgroundColor = "";
      };
      break;
  }
}

Copier après la connexion

以上就是本文的全部内容，希望对大家的学习有所帮助。