ElementInternalsを使用してカスタムフォームコントロールを作成します-CSSチュートリアル-php.cn

ElementInternalsを使用してカスタムフォームコントロールを作成します

開発者は長い間、フォーム要素をより多く制御することに熱心でした。これは少し誇張されていますが、フォームコンポーネントの作成またはカスタマイズは、長年にわたってフロントエンドのWeb開発の聖杯でした。

カスタム要素（例<my-custom-element></my-custom-element>）最も強力な機能の1つは、Google Chrome 77バージョン以来静かにリリースされており、他のブラウザーに徐々に適用されています。 ElementInternals標準は、非常に控えめな名前の強力な機能セットです。その機能には、アクセシビリティコントロールを取り巻く参加フォームとAPIが含まれます。

この記事では、カスタムフォームコントロールを作成し、制約検証を統合し、内部アクセシビリティの基本を紹介し、これらの機能を組み合わせて高度にポータブルなマクロフォームコントロールを作成する方法を示します。

設計システムに一致するシンプルなカスタム要素を作成することから始めましょう。私たちの要素は、Shadow Domのすべてのスタイルを保存し、基本的なアクセシビリティを確保します。 Google Polymerチームの優れたLitelement Libraryをコードの例として使用しますが、絶対に必要ありませんが、カスタム要素を作成するための優れた抽象化を提供します。

この例では、aを作成します<rad-input></rad-input>、いくつかの基本的なデザインがあります。また、通常のHTML入力であるフォームに2番目の入力を追加し、デフォルト値を追加しました（したがって、送信を押してその仕組みを確認できます）。

[送信]ボタンをクリックすると、いくつかのことが起こります。まず、コミットイベントのpreventDefaultメソッドは、この場合、ページがリロードされないようにするために呼び出されます。その後、フォームに関する情報にアクセスできるFormDataオブジェクトを作成し、JSON文字列を構築して追加するために使用します<output></output>要素。ただし、出力に追加される一意の値は、「Basic」という名前の要素からのものであることに注意してください。

これは、私たちの要素がまだフォームと対話する方法がわからないためです。<rad-input></rad-input> 、それがその名前に値するのを助けるために。まず、ElementのコンストラクターにメソッドのattachInternalsメソッドを呼び出す必要があります。また、まだ仕様をサポートしていないブラウザで使用するために、ElementInternals PolyFillをページにインポートします。

attachInternalsメソッドは、メソッドで使用できる新しいAPIを含む新しい要素内部インスタンスを返します。私たちの要素がこれらのAPIを活用するためには、 trueを返す静的なformAssociatedゲッターを追加する必要があります。

クラスラディンプットはlitelementを拡張します{
  static get formassociated（）{
    trueを返します。
  }

  constructor（）{
    素晴らしい（）;
    this.internals = this.attachinternals（）;
  }
}

ログイン後にコピー

要素のinternals属性のいくつかのAPIを見てみましょう。

setFormValue(value: string|FormData|File, state?: any): void - このメソッドは、親フォームが存在する場合、その親フォームに要素の値を設定します。値がnullの場合、要素はフォーム送信プロセスに参加しません。
form - 存在する場合、それは要素の親形式への参照です。
setValidity(flags: Partial<validitystate> , message?: string, anchor?: HTMLElement): void</validitystate> - setValidity性法は、フォームの要素の妥当性ステータスを制御するのに役立ちます。フォームが無効である場合、検証メッセージが存在する必要があります。
willValidate - フォームが提出されたときに要素が評価される場合はtrue。
validity - HTMLInputElement.prototype.validity .有効性に添付されているAPIとセマンティクスに一致する有効性オブジェクト。
validationMessage - Controlを無効にするためにsetValidityある場合、これはエラーを説明するメッセージです。
checkValidity - 要素が有効である場合はtrueを返し、それ以外の場合はfalseを返し、要素上の無効なイベントをトリガーします。
reportValidity - イベントがキャンセルされていない場合、 checkValidityと同じように、ユーザーに問題が報告されます。
labels - label[for]を使用して、この要素の要素のリストをマークします。
要素に関するARIA情報を設定するための他のいくつかのコントロール。

カスタム要素の値を設定します

私たちのものを変更しましょう<rad-input></rad-input>これらのAPIのいくつかを利用するには：

ここでは、要素の_onInputメソッドを変更して、 this.internals.setFormValueへの呼び出しを含みます。これは、指定された名前（HTMLのプロパティとして設定）を使用して、フォームに値を登録したいというフォームを示しています。また、要素のレンダリングが完了したときに、要素の値を空の文字列に設定するfirstUpdated方法（Litelementを使用しないときのconnectedCallbackと同様）を追加しました。これは、要素が常にフォームの値を持つようにするためです（必須ではありませんが、ヌル値を渡すことでフォームから要素を除外できます）。

入力に値を追加してフォームを送信すると、<output></output>要素には、 radInput値が表示されます。また、私たちの要素がHTMLFormElementのradInputプロパティに追加されていることもわかります。しかし、気づいたかもしれないことの1つは、私たちの要素に価値がないにもかかわらず、フォームの提出を許可することです。次に、要素に検証を追加しましょう。

制約検証を追加します

フィールドの検証を設定するには、要素内のオブジェクトのsetValidityメソッドを使用するために、要素を少し変更する必要があります。このメソッドは3つのパラメーターを受け入れます（要素が無効である場合、2番目のパラメーターのみが必要であり、3番目のパラメーターは常にオプションです）。最初のパラメーターは、 ValidityStateオブジェクトの一部です。フラグがtrueに設定されている場合、コントロールは無効としてマークされます。組み込みの有効性キーの1つがニーズを満たしていない場合は、Common customErrorキーを使用できます。最後に、コントロールが有効な場合、オブジェクトリテラル（{}）を渡して、コントロールの有効性をリセットします。

2番目のパラメーターは、コントロールの有効なメッセージです。このパラメーターは、コントロールが無効である場合は必要であり、コントロールが有効な場合はこのパラメーターが許可されていません。 3番目のパラメーターはオプションの検証ターゲットです。これは、フォームの送信が無効である場合、またはreportValidityが呼び出された場合にユーザーのフォーカスを制御します。

私たちは私たちに与えます<rad-input></rad-input>このロジックを処理するための新しい方法を紹介します。

 _managerequired（）{
  const {value} = this;
  const input = this.shadowroot.queryselector（ 'input'）;
  if（value === '' && this.required）{
    this.internals.setAlidity（{
      ValueMissing：true
    }、「このフィールドが必要です」、入力）;
  } それ以外 {
    this.internals.setAlidity（{}）;
  }
}

ログイン後にコピー

この関数は、コントロールの値と入力を取得します。値が空の文字列に等しく、要素が必要に応じてマークされている場合、 internals.setValidityを呼び出し、コントロールの妥当性を切り替えます。これで、 firstUpdatedと_onInputメソッドでこのメソッドを呼び出すだけで、要素に基本的な検証を追加できます。

私たちの存在下で<rad-input></rad-input>値を入力する前に、[送信]ボタンをクリックすると、ElementInternals仕様をサポートするブラウザにエラーメッセージが表示されます。残念ながら、 PolyFillは、サポートされていないブラウザの組み込み検証ポップアップをトリガーする信頼できる方法がないため、検証エラーの表示をサポートしていません。

また、 internalsオブジェクトを使用して、例にいくつかの基本的なアクセシビリティ情報を追加しました。要素に_requiredのプロパティを追加します。これは、 this.requiredプロキシとして機能し、 requiredに応じてゲッター/セッターを追加します。

必要な（）{
  this._required;
}

必要な設定（IsRequired）{
  this._required = isrequired;
  this.internals.arieRequired = isRequired;
}

ログイン後にコピー

requiredプロパティをinternals.ariaRequiredに渡すことにより、Ariarequiredに渡すことで、私たちの要素が現在価値が必要であることをスクリーンリーダーに思い出させています。 PolyFillでは、これはaria-required属性を追加することによって行われます。ただし、サポートされているブラウザでは、属性が要素に固有のものであるため、属性は要素に追加されません。

マイクロフォームを作成します

設計システムに適合する有効な入力ができるようになったので、要素を複数のアプリケーションで再利用できるパターンに組み合わせて開始することをお勧めします。 ElementInternalsの最も人目を引く機能の1つは、 setFormValueメソッドが文字列とファイルデータだけでなく、FormDataオブジェクトを取得できることです。したがって、複数の組織で使用される可能性のある共通のアドレスフォームを作成する必要があるとしますが、新しく作成された要素でこれを簡単に実行できます。

この例では、要素の影のルート内にフォームを作成し、4つを組み合わせます<rad-input></rad-input>アドレスフォームを作成する要素。今回はsetFormValue文字列で呼び出す代わりに、フォームの値全体を渡すことを選択します。その結果、私たちの要素は、その子フォーム内の個々の要素の値を外部形式に渡します。

このフォームに制約検証を追加することは、追加のスタイリング、動作、およびコンテンツスロットを提供するように、かなり単純なプロセスです。これらの新しいAPIを使用すると、最終的に開発者はカスタム要素の多くの可能性を解き放ち、最終的にユーザーエクスペリエンスを自由に制御できるようになります。

以上がElementInternalsを使用してカスタムフォームコントロールを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。