JavaScript のフォームの詳細な紹介

JavaScript フォーム

この記事の主な目的は、フォームの基本、テキスト ボックス スクリプト関連の使用法、セレクト ボックス スクリプト関連の使用法、その他の知識など、フォーム関連の知識を紹介することです。最新の Web 開発では、フォーム データの送信にフォームのデフォルト動作が使用されることはほとんどありませんが、代わりにデフォルト動作が無効になり、Ajax を使用して POST リクエストを通じてフォーム データが非同期に送信されます。しかし、これはフォームがもはや重要ではないという意味ではありません。 JavaScript にはフォーム フィールドの値を迅速に取得できる多くのプロパティとメソッドが用意されているため、フォームは依然としてフォームを送信する最も速い方法です。したがって、フォームを理解して習得する必要があります。

ディレクトリ: JavaScript フォーム

• フォームフォーム

• プロパティ

• メソッド

• イベント

• フォームフィールドには入力、ボタンが含まれます、選択、テキストエリア、次の属性メソッドイベントはすべてのフォームフィールドに共通です)

• 属性

• メソッド

• イベント

• テキストボックス(入力、テキストエリア)

• テキストを選択

• フィルター入力

• フォーカスを自動的に切り替える

• 属性

• 実践的な応用

• セレクトボックス（選択、オプション）

フォームフォーム

HTMLでFormタグを取得ID、クラス、名前属性の取得、または form タグから直接取得します。もちろん、document.forms を使用して HTML 内のすべてのフォーム要素を取得することもでき、NodeList オブジェクトが返されます。

document.forms获取HTML中所有表单元素，会返回一个NodeList对象。

属性

说一个重要的

elements: document.forms[0].elements 返回类数组对象，包含该form表单下所有表单字段。可以通过表单字段的name属性或者索引访问.

let form = document.forms[0]
form.element[0] === form.element['index-0']

方法

在form表单上的方法有submit、reset方法。在现代web开发中，都会阻止form表单提交的默认行为。当没有参数时，可以在不点击按钮的情况下将所有表单字段的值向服务器提交数据。通常，存在以下三种按钮可以提交表单数据。

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

事件

submit: 当给form表单绑定submit事件，在点击图像按钮或者type为submit的按钮会提交表单数据。此时可以通过事件对象阻止表单全局提交的默认行为。在提交表单时，为避免用户多次点击导致多次提交的问题，可以在提交后禁用提交按钮。

form表单字段

属性

都比较简单，有如下：

• name

• value

• form: 指向当前表单元素，只读。

• type

• readOnly

• disabled

• autofocus: 自动获得焦点。HTML5新增属性。<input type="text" autofocus />属性

重要な

要素を説明します: document.forms[0].elements フォームの下のすべてのフォームフィールドを含む、配列のようなオブジェクトを返します。 name 属性またはフォーム フィールドのインデックスを通じてアクセスできます。

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

メソッド

フォーム上のメソッドには、submit メソッドとreset メソッドが含まれます。最新の Web 開発では、デフォルトの動作ではフォームの送信が禁止されています。パラメータがない場合は、ボタンをクリックせずにすべてのフォームフィールドの値をサーバーに送信できます。通常、フォーム データを送信できるボタンには 3 種類があります。

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

イベント

submit: 送信イベントをフォームにバインドするときに、画像ボタンまたは送信タイプのボタンをクリックすると、フォーム データが送信されます。このとき、フォームのグローバル送信のデフォルトの動作は、イベント オブジェクトを通じて阻止できます。フォームを送信するとき、ユーザーが複数回クリックすることによって発生する複数の送信の問題を回避するために、送信後に送信ボタンを無効にすることができます。

フォームフォームフィールド

属性

は、次のように比較的単純です:

• name

• value

• form: 現在のフォーム要素を指します(読み取り専用)。

• type

• readOnly

• disabled

• autofocus: 自動的にフォーカスを取得します。 HTML5 の新しい属性。 <input type="text" autofocus />。このイベントをサポートするブラウザには、IE10 以降、Chrome、Firefox などがあります。したがって、サポートされているブラウザのオートフォーカスは true を返し、サポートされていない場合は空の文字列を返します。

• メソッド
  focus()、blur(): 通常、blur メソッドと組み合わせて使用​​されます。たとえば、DOMContentLoaded イベントの後、入力要素にフォーカスを取得して、ユーザーが直接入力できるようにします。

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

• イベント
  フォーカス、ブラーイベント: 実際のビジネスでは、フォーカスイベントとブラーイベントを組み合わせて使用​​できます。入力ノードにフォーカスが当たったら、入力要素の色を変更します。フォーカスが失われたときに背景色をリセットします。

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

• change イベント: input 要素と textarea 要素の場合、フォーカスの取得からフォーカスの喪失に変化し、値が変化すると、change イベントがトリガーされます。 select 要素の場合、値が変更されるたびに変更イベントがトリガーされます。つまり、変更イベントはフォーカスを失うことなくトリガーされます。この詳細には注意が必要です。
  テキスト ボックス (入力、テキストエリア)
上記のフォーム フィールドの共通のプロパティとメソッドに加えて、テキスト ボックスには、テキストを操作するための独自のプロパティとメソッドがいくつかあります。

• 属性

• maxlength: 最大入力長

  🎜🎜🎜size: テキストボックスに表示できる文字数🎜🎜🎜🎜cols: テキストエリアの列数🎜🎜🎜🎜rows: textarea rows🎜🎜🎜 🎜 · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·: · · · · · · · · · · · · · · · · · · · · ·ă‚¿ 🎜🎜🎜🎜type🎜🎜🎜🎜🎜email: デフォルトの検証🎜🎜🎜🎜url: URLパターン🎜🎜🎜🎜number: 数字のみを入力できます🎜🎜🎜🎜🎜pattern: 実際には正規表現を使用していますHTML。 IE10+以降のブラウザでサポートされています。 🎜🎜🎜🎜checkValidity メソッド: このメソッドを document.forms[0] にバインドして、フォーム フィールド全体が有効かどうかを確認します。有効な場合は true を返します。それ以外の場合は 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;>

实际应用

选择文本

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

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

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

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

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

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

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

过滤输入

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

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

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

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

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

选择框(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: 发送到服务器的值

以上がJavaScript のフォームの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。