Detaillierte Einführung in Formulare in JavaScript-js-Tutorial-php.cn

JavaScript-Formular

Der Hauptzweck dieses Artikels besteht darin, formularbezogenes Wissen einzuführen, z. B. Formulargrundlagen, Verwendung von Textfeldskripten, Verwendung von Auswahlfeldskripten und anderes Wissen. Obwohl in der modernen Webentwicklung das Standardverhalten von Formularen selten zum Senden von Formulardaten verwendet wird, wird das Standardverhalten deaktiviert und dann Ajax zum asynchronen Senden von Formulardaten über eine POST-Anfrage verwendet. Das bedeutet aber nicht, dass Formen nicht mehr wichtig sind. Formulare sind immer noch die schnellste Möglichkeit, Formulare zu übermitteln, da JavaScript viele Eigenschaften und Methoden bereitstellt, mit denen wir schnell die Werte von Formularfeldern abrufen können. Daher ist es immer noch notwendig, die Form zu verstehen und zu beherrschen.

Verzeichnis: JavaScript-Formular

Formularformular

Attribute
Methoden
Ereignisse

Formularfelder (Formularfelder umfassen Eingabe, Schaltfläche, Auswahl, Textbereich, die folgende Attributmethode). (Ereignisse, die allen Formularfeldern gemeinsam sind)

Eigenschaften
Methoden
Ereignisse

Textfeld (Eingabe, Textbereich)

Text auswählen
Eingabe filtern
Fokus automatisch wechseln
Attribute
Praktische Anwendung

Feld auswählen (Auswahl, Option)

Formularformular

Das Abrufen des Form-Tags in HTML kann über die ID, Klasse, abgerufen werden , und Namensattribute oder rufen Sie es direkt über das Formular-Tag ab. Natürlich können Sie auch document.forms verwenden, um alle Formularelemente in HTML abzurufen, und es wird ein NodeList-Objekt zurückgegeben.

Attribute

sagt ein wichtiges

Element: document.forms[0].elements Gibt ein Array-ähnliches Objekt zurück, einschließlich aller Formularfelder unter dem Formular. Der Zugriff erfolgt über das Namensattribut oder den Index des Formularfelds.

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

Nach dem Login kopieren

Methoden

Zu den Methoden im Formular gehören Submit- und Reset-Methoden. In der modernen Webentwicklung besteht das Standardverhalten darin, die Formularübermittlung zu verhindern. Wenn keine Parameter vorhanden sind, können die Werte aller Formularfelder ohne Klicken auf die Schaltfläche an den Server übermittelt werden. Normalerweise gibt es drei Arten von Schaltflächen, mit denen Formulardaten übermittelt werden können.

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

Nach dem Login kopieren

Ereignis

Senden: Beim Binden des Übermittlungsereignisses an das Formular werden die Formulardaten übermittelt, wenn auf die Bildschaltfläche oder die Schaltfläche vom Typ „Senden“ geklickt wird. Zu diesem Zeitpunkt kann das Standardverhalten der globalen Übermittlung des Formulars durch das Ereignisobjekt verhindert werden. Um beim Absenden eines Formulars das Problem mehrfacher Übermittlungen aufgrund mehrerer Klicks durch den Benutzer zu vermeiden, können Sie die Schaltfläche „Senden“ nach dem Absenden deaktivieren.

Formularfelder

Attribute

sind relativ einfach, wie folgt:

Name
value
form: Zeigt auf das aktuelle Formularelement, schreibgeschützt.
Typ
readOnly
deaktiviert
Autofokus: Fokus automatisch erhalten. Neue HTML5-Attribute. <input type="text" autofocus />. Zu den Browsern, die dieses Ereignis unterstützen, gehören IE10+, Chrome und Firefox. Daher gibt der Autofokus unterstützter Browser „true“ zurück, und wenn er nicht unterstützt wird, wird eine leere Zeichenfolge zurückgegeben.

Methoden

focus(), blur(): werden normalerweise in Verbindung mit der Blur-Methode verwendet. Lassen Sie beispielsweise nach dem DOMContentLoaded-Ereignis ein Eingabeelement den Fokus erhalten, damit der Benutzer direkt eingeben kann.

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

Nach dem Login kopieren

Ereignisse

Fokus- und Unschärfeereignisse: Im tatsächlichen Geschäft können Fokus- und Unschärfeereignisse in Kombination verwendet werden. Wenn der Eingabeknoten den Fokus erhält, ändern Sie die Farbe des Eingabeelements. Setzen Sie die Hintergrundfarbe zurück, wenn der Fokus verloren geht.

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)

Nach dem Login kopieren

Änderungsereignis: Für Eingabe- und Textbereichselemente wird das Änderungsereignis ausgelöst, wenn sie von Fokus zu Fokusverlust wechseln und sich der Wert ändert. Für das ausgewählte Element wird das Änderungsereignis immer dann ausgelöst, wenn sich der Wert ändert. Mit anderen Worten: Das Änderungsereignis wird ausgelöst, ohne den Fokus zu verlieren. Dieses Detail erfordert Aufmerksamkeit.

Textfeld (Eingabe, Textbereich)

Zusätzlich zu den allgemeinen Eigenschaften und Methoden der oben genannten Formularfelder verfügt das Textfeld über einige eigene Eigenschaften und einige Methoden zur Textbearbeitung.

Attribute

maxlength: Maximale Eingabelänge
size: Die Anzahl der Zeichen, die im Textfeld angezeigt werden können
Spalten: Textbereich-Spaltennummer
Zeilen: Textbereich-Zeilennummer
···· ···· Das Folgende sind alle neue Einschränkungsvalidierungs-APIs in HTML5······
erforderlich: erforderliche Option.
Typ

E-Mail: Standardbestätigung
URL: URL-Muster
Zahl: Es können nur Zahlen eingegeben werden

Muster: Es werden tatsächlich reguläre Ausdrücke in HTML verwendet. Unterstützt von Browsern ab IE10+.

checkValidity-Methode: Binden Sie diese Methode an document.forms[0], um zu prüfen, ob das gesamte Formularfeld gültig ist. Wenn gültig, wird true zurückgegeben. Andernfalls wird false zurückgegeben.

// 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;>

Nach dem Login kopieren

实际应用

选择文本

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

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

Nach dem Login kopieren

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)

Nach dem Login kopieren

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)

Nach dem Login kopieren

过滤输入

文本框的过滤输入主要是某些文本的输入是有条件的。比如说需要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)

Nach dem Login kopieren

此方法通过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)

Nach dem Login kopieren

选择框(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的值。

option元素

index: 索引值
label: 当前选项的标签
selected: 被选中的option元素
text: 文本
value: 发送到服务器的值

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in Formulare in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!