Introduction détaillée aux formulaires en JavaScript-js tutoriel-php.cn

Formulaire JavaScript

L'objectif principal de cet article est de présenter les connaissances liées aux formulaires, telles que les bases du formulaire, l'utilisation liée au script de zone de texte, l'utilisation liée au script de zone de sélection et d'autres connaissances. Bien que dans le développement Web moderne, le comportement par défaut du formulaire soit rarement utilisé pour soumettre les données du formulaire, le comportement par défaut est désactivé, puis Ajax est utilisé pour soumettre les données du formulaire de manière asynchrone via une requête POST. Mais cela ne veut pas dire que les formes ne sont plus importantes. Les formulaires restent le moyen le plus rapide de soumettre des formulaires car JavaScript fournit de nombreuses propriétés et méthodes qui nous permettent d'obtenir rapidement les valeurs des champs de formulaire. Encore faut-il comprendre et maîtriser la forme.

Répertoire : formulaire JavaScript

formulaire

Attributs
Méthodes
Événements

champs du formulaire (les champs du formulaire incluent la saisie, le bouton, la sélection, la zone de texte, la méthode des attributs suivants événements Communs à tous les champs du formulaire)

Propriétés
Méthodes
Événements

Zone de texte (saisie, zone de texte)

Sélectionner le texte
Filtrer l'entrée
Changer automatiquement de focus
Attributs
Application pratique

Boîte de sélection (sélectionner, option)

formulaire de formulaire

L'obtention de la balise Form en HTML peut être obtenue via l'identifiant, la classe , et les attributs de nom, ou obtenez-les directement via la balise form. Bien sûr, vous pouvez également utiliser document.forms pour obtenir tous les éléments du formulaire en HTML, et un objet NodeList sera renvoyé.

Attributs

indique un

éléments important : document.forms[0].elements Renvoie un objet de type tableau, y compris tous les champs du formulaire sous le formulaire. Il est accessible via l'attribut de nom ou l'index du champ du formulaire

let form = document.forms[0]
form.element[0] === form.element[&#39;index-0&#39;]

Copier après la connexion

Méthodes

Les méthodes du formulaire incluent les méthodes de soumission et de réinitialisation. Dans le développement Web moderne, le comportement par défaut consiste à empêcher l’envoi de formulaires. Lorsqu'il n'y a aucun paramètre, les valeurs de tous les champs du formulaire peuvent être soumises au serveur sans cliquer sur le bouton. En règle générale, il existe trois types de boutons permettant de soumettre des données de formulaire.

<input type="submit" value=&#39;提交&#39; />
<button type=&#39;submit&#39;>提交</button>
<input type="image" src=&#39;pic.png&#39; />

Copier après la connexion

Événement

soumettre : lors de la liaison de l'événement de soumission au formulaire, les données du formulaire seront soumises en cliquant sur le bouton d'image ou sur le bouton de type soumettre. À l'heure actuelle, le comportement par défaut de soumission globale du formulaire peut être empêché via l'objet événement. Lors de la soumission d'un formulaire, afin d'éviter le problème des soumissions multiples causées par plusieurs clics de l'utilisateur, vous pouvez désactiver le bouton de soumission après la soumission. Les

champs du formulaire

les attributs

sont relativement simples, comme suit :

nom
value
form : pointe vers l'élément de formulaire actuel, en lecture seule.
type
lecture seule
désactivé
autofocus : Obtenez automatiquement la mise au point. Nouveaux attributs HTML5. <input type="text" autofocus />. Les navigateurs prenant en charge cet événement incluent IE10+, Chrome et Firefox. Par conséquent, l'autofocus des navigateurs pris en charge renverra vrai, et s'il n'est pas pris en charge, il renverra une chaîne vide.

Méthodes

focus(), Blur() : généralement utilisées en conjonction avec la méthode Blur. Par exemple, après l'événement DOMContentLoaded, laissez un élément d'entrée obtenir le focus afin que l'utilisateur puisse saisir directement.

document.addEventLitener(&#39;DOMContentLoaded&#39;, e => {
    let input = docuemnt.querySelector(&#39;.input-1&#39;)
    input.focus()
}, false)

Copier après la connexion

Événements

événements de mise au point et de flou : dans les affaires réelles, les événements de mise au point et de flou peuvent être utilisés en combinaison. Si le nœud d'entrée obtient le focus, changez la couleur de l'élément d'entrée. Réinitialisez la couleur d’arrière-plan lorsque la mise au point est perdue.

let input = document.querySelector(&#39;.input-0&#39;)
input.addEventListener(&#39;focus&#39;, e => {
    e.target.style.backgroundColor = &#39;#ccc&#39;
}, false)
input.addEventListener(&#39;blur&#39;, e => {
    e.target.style.backgroundColor = &#39;#fff&#39;
}, false)

Copier après la connexion

événement de changement : pour les éléments d'entrée et de zone de texte, l'événement de changement est déclenché lorsqu'ils passent de l'obtention du focus à la perte du focus et que la valeur change. Pour l'élément select, l'événement change sera déclenché chaque fois que la valeur change. En d’autres termes, l’événement de changement sera déclenché sans perdre le focus. Ce détail mérite attention.

Zone de texte (saisie, zone de texte)

En plus des propriétés et méthodes communes des champs de formulaire ci-dessus, la zone de texte possède certaines de ses propres propriétés et certaines méthodes d'exploitation du texte.

Attributs

maxlength : longueur maximale de saisie
size : le nombre de caractères pouvant être affichés dans la zone de texte
cols : numéro de colonne de la zone de texte
lignes : numéro de ligne de la zone de texte
···· ···· Ce qui suit Ce sont toutes de nouvelles API de validation de contraintes en HTML5······
obligatoire : option obligatoire.
type

email : vérification par défaut
url : modèle d'url
numéro : seuls des nombres peuvent être saisis.

modèle : il utilise en fait des expressions régulières en HTML. Pris en charge par les navigateurs IE10+ et supérieurs.

Méthode checkValidity : liez cette méthode à document.forms[0] pour vérifier si l'intégralité du champ du formulaire est valide. Si valide, renvoie vrai. Sinon, retournez false.

// type为number时，可以指定min,max,step(表示某个值得倍数)属性
<input type="number" min=&#39;0&#39; max=&#39;100&#39; step=&#39;5&#39; name=&#39;count&#39;>
// 此时正则默认添加了^, $，即以下正则等于&#39;^\d+$&#39;
<input type=&#39;text&#39; pattern=&#39;\d+&#39;>

Copier après la connexion

实际应用

选择文本

1.select方法：input和textarea元素都支持selct方法。这个方法不接受任何参数，表示选择某个文本框元素的所有文本

// 当input元素获得焦点是选择文本
let input = document.querySelector(&#39;.input-1&#39;)
input.addEventListener(&#39;focus&#39;, e => {
    e.target.select()
}, false)

Copier après la connexion

2.setSelectionRange方法：这个方法用于选择部分文本内容。接受两个参数，起始位置和结束位置。HTML5新增的方法。IE9+以上浏览器支持。

// 当input获得焦点时，选择文本中的第二个值
let input = document.querySelector(&#39;.input-1&#39;)
input.addEventListener(&#39;focus&#39;, e => {
  let target = e.target
  console.log(target.setSelectionRange(1, 2))
}, false)

Copier après la connexion

3.select事件：当文本框元素中的文本被选中时，就会触发select事件。只要选中文本就会触发，不需要全选。

4.selectionStart, selectionEnd属性：这两个属性用于或者用户选中的文本内容。因此，可以与select事件结合使用，获取用户选中的文本内容。HTML5新增的两个属性。IE9+以上浏览器支持。

let input = document.querySelector(&#39;.input-1&#39;)
input.addEventListener(&#39;select&#39;, e => {
    let target = e.target
    let start = target.selectionStart
    let end = target.selectionEnd
    console.log(target.value.slice(start, end))
}, false)

Copier après la connexion

过滤输入

文本框的过滤输入主要是某些文本的输入是有条件的。比如说需要input元素中只允许输入数字。这时候就需要用到文本的过滤。基本思路如下

1.通过监听keypress事件，判断输入时的字符是否是数字。通过charCode判断。keypress事件会在用户按下键盘上的【字符键】时触发。

2.如果不是，则取消默认行为，即取消文本的输入。

let input = document.querySelector(&#39;.input-1&#39;)
input.addEventListener(&#39;keypress&#39;, e => {
  let charCode = e.charCode
  if (!/[\d+.+-]/g.test(String.fromCharCode(charCode))) {
    e.preventDefault()
  }
}, false)

Copier après la connexion

此方法通过charCode属性来判断用户输入的字符是否是数字字符，如果是则可以输入，如果不是则禁止输入。这里要注意的是，不能通过input的value属性来判断。因为keydown和keypress事件会在value改变之前触发，而keyup事件则是在value发生改变之后触发。因此，keypress获取value值是上一次的值，但是keypress事件可以获取到按下键盘时的charCode属性，然后通过String对象的fromCharCode转成对应的字符，根据此字符做一次正则验证即可。同时，charCode属性只有在keypress事件才存在，在keydown和keyup事件中都会返回0。

自动切换焦点

这种应用主要用于手机号码上。如手机号码可以分为'334'的结构。因此可以创建三个input，当输入完毕时自动切换焦点到下一个input上。

// 必须设置最大值
<input type="text" name=&#39;text1&#39; maxlength="3">
<input type="text" name=&#39;text2&#39; maxlength="3">
<input type="text" name=&#39;text3&#39; maxlength="4">
// 当value的length等于maxleng时，发生跳转
function judge (len, max, target, form) {
  if (len === max) {
    let length = form.elements.length
    for (let i = 0; i < length; i++) {
      if (target === form.elements[i]) {
        if (form.elements[i + 1]) {
          form.elements[i + 1].focus()
        }
      }
    }
  }
}
// 给三个input绑定keyup事件，通过事件代理方式。
document.addEventListener(&#39;keyup&#39;, e => {
  let target = e.target
  let form = target.form
  let len = target.value.length
  let maxLen = target.maxLength
  switch (target.name) {
    case &#39;text1&#39;:
      judge(len, maxLen, target, form)
      break
    case &#39;text2&#39;:
      judge(len, maxLen, target, form)
      break
    case &#39;text3&#39;:
      judge(len, maxLen, target, form)
      break
  }
}, false)

Copier après la connexion

选择框(select, option)

选择框是通过select和option元素组合而成的。除了表单字段共有的属性和方法之外，在这两个元素上提供了其他的属性和方法。目的是为了更加方便的操作选择框元素。

select元素

add(newOption, targetOption)：在select元素上有add方法，向select元素插入新的option元素。传入两个参数：新的option元素和目标option元素。
multiple属性: 是否允许多项选择。如果未添加此属性，则select元素的type属性为'select-one'。否则为'select-multiple'。
options属性：取得该select元素下的所有options元素。返回一个类数组对象。
selectedIndex属性: 选中options元素的索引值。
size属性: 可见的行数
value属性: 发送到服务器的值，如果没有这个属性，则会取innerText的值。