<alier-textfield>

概要

テキスト入力を行うためのカスタムエレメントです。

<alier-textfield>初期値</alier-textfield>

<alier-textfield> は属性 type の指定により

  • 単行のテキスト
  • URL
  • メールアドレス
  • 電話番号
  • 複数行のテキスト

を切り替えられるコンポーネントです。

子要素

子要素は入力コントロールの初期値となります。値は HTML として評価せず、そのままテキストとして扱います。

カテゴリー

このエレメントはフォーム関連要素です。<form> で値を送信したり <label> を紐づけしたりできます。

構造

<alier-textfield> は以下のような構造になっています。

# ── control
  • control ノードは入力コントロールを指しています

このノードを part 疑似要素で指定するとスタイルを適用できます。

属性

グローバル属性 にも対応しています。

コントロールの種類

type 属性を指定することで、コントロールに入力するテキストの種類を指定できます。 適切な値を指定することで、ユーザはブラウザの自動補完機能や仮想キーボードの指定などの支援を受けることができます。

省略した場合は text になります。

値 説明
email <input type="email"> と同様に、ユーザはメールアドレスを入力するためのブラウザ支援を受けることができます。
multilines <textarea> と同様に複数行のテキストを入力できます。
tel <input type="tel"> と同様に、ユーザは電話番号を入力するためのブラウザ支援を受けることができます。
text <input type="text"> と同様に単行のテキストを入力できます。
url <input type="url"> と同様に、ユーザは URL を入力するためのブラウザ支援を受けることができます。

例えば、メールアドレスの入力欄を作成したい場合は以下のようになります。

<alier-textfield type="email"></alier-textfield>

入力関連

名前 有効な値 有効な type 説明
autocapitalize none, off, sentences, on, words, characters text, multilines 入力文字列の先頭大文字化を行うかどうかを制御します。
autocomplete on, off, トークンリスト すべて 入力欄に期待する情報の種類やブラウザ自動支援機能に情報を提供します。
disabled 論理属性 すべて 入力欄を無効にします。
inputmode none, text, decimal, numeric, tel, search, email, url すべて 仮想キーボード補助機能を指定します。既定では text です。
maxlength ０以上の整数 すべて 最大文字数です。整数にパースできない値を設定した場合は０になります。
minlength ０以上の整数 すべて 最小文字数です。整数にパースできない値を設定した場合は０になります。
placeholder 任意の値 すべて コントロールに何を入力できるかをユーザに助言できます。
readonly 論理属性 すべて 読み取り専用です。
rows 正の整数 multilines 入力内容を表示するコントロールの行数を指定します。
size 正の整数 すべて 入力内容を表示するコントロールの横幅を指定します。
spellcheck 空文字, true, false text, multilines スペルチェックすべきかどうかを制御します。

フォーム関連

名前 有効な値 有効な type 説明
name 任意の値 すべて コントロールの名前で、フォーム送信したときにコントロールの値と共に送信されます。
pattern 任意の値 text, email, url, tel 正規表現による制約検証を行うための正規表現パターンです。
required 論理属性 すべて フォーム送信時に必要な要素であることを示します。

その他

名前 有効な値 有効な type 説明
data-active-events カンマ区切りのイベント すべて ProtoViewLogic に関連付けるイベントを指定します。既定では change,invalid が指定されています。

スタイル

part 疑似要素

::part() 疑似要素を利用することで、このエレメントの内部要素を自由にカスタマイズすることができます。

part 名 対象
control 入力コントロールに適用します。その実体は属性 type が multilines の場合は <textarea> タグ、その他の場合は <input> タグです。

AlierTextField クラス

モジュールパス: /alier_sys/TextField.js

--- config: class: hideEmptyMembersBox: true --- classDiagram direction LR HTMLElement <|-- AlierCustomElement AlierCustomElement <|-- AlierTextField

<alier-textfield> を操作するためのインターフェースを提供します。

プロパティ

autocapitalize

このエレメントの属性 autocapitalize です。頭文字を自動で大文字にするかどうかを指定します。

指定できる値は次のいずれかです。

  • "none"
  • "off"
  • "sentences"
  • "on"
  • "words"
  • "characters"

指定されなかった場合は "none" です。

型

string

autocomplete

このエレメントの autocomplete 属性です。ブラウザによって自動補完可能かどうかを表します。

この値は "on" 、 "off" またはトークンリストです。

型

string

defaultValue

このプロパティは読み取り専用です。

コントロールの初期値です。

型

string

form

このプロパティは読み取り専用です。

親の <form> エレメントの参照です。

型

HTMLElement

disabled

このエレメントの disabled 属性です。コントロールが無効かどうかを表します。

型

boolean

inputMode

このエレメントの inputmode 属性です。仮想キーボードのヒントをユーザエージェントに与えます。

次のいずれかの値を指定できます。

  • "none"
  • "text"
  • "decimal"
  • "numeric"
  • "tel"
  • "search"
  • "email"
  • "url"

既定では "text" です。

型

string

labels

このプロパティは読み取り専用です。

紐づけられたラベルのリストです。

型

NodeList

maxLength

このエレメントの maxlength 属性です。コントロールに入力できる最大文字数を表します。

有効な値は整数です。負の数値を代入した場合は未指定と同じ動作になります。

型

number

minLength

このエレメントの minlength 属性です。コントロールに入力しなければならない最小文字数を表します。

有効な値は整数です。負の数値を代入した場合は未指定と同じ動作になります。

型

number

name

このエレメントの name 属性です。このエレメントの名前を表します。

型

string

pattern

このエレメントの pattern 属性です。コントロールの値をチェックするための正規表現を含みます。

型

string

placeholder

このエレメントの placeholder 属性です。ユーザに入力の助言を提示します。

型

string

readOnly

このエレメントの readonly 属性です。ユーザがコントロールに書き込みできないことを表します。

型

boolean

required

このエレメントの required 属性です。フォーム送信時に必須かどうかを表します。

型

boolean

rows

このエレメントの rows 属性です。入力コントロールの行数を表します。 この数値は正の整数でなければなりません。

型

number

selectionDirection

選択された方向を文字列で表し、次の値のうちいずれかとなります。

  • forward: ロケールに対して前方方向
  • backward: 逆方向
  • none: 方向不明

型

string

selectionEnd

選択中の文字列の末尾を数値で表します。選択がない場合は入力カーソル位置の直後の文字のオフセットとなります。

型

number

selectionStart

選択中の文字列の先頭を数値で表します。選択がない場合は入力カーソルの位置となります。

型

number

size

このエレメントの size 属性です。入力コントロールの横幅を表します。

型

number

type

このエレメントの type 属性です。属性で指定されたコントロールの型を表します。

型

string

validationMessage

このプロパティは読み取り専用です。

制約を満たしていない場合、その理由を表す文字列です。制約を満たしている場合は空文字列です。

型

string

validity

このプロパティは読み取り専用です。

現在の検証状態です。

型

ValidityState

value

コントロールの値です。

型

string

willValidate

このプロパティは読み取り専用です。

このエレメントが制約検証の候補であるかどうかを示す論理値です。true であれば検証候補であり、false であれば検証候補ではありません。

型

boolean

メソッド

checkValidity()

このエレメントが制約対象で、かつ制約を満たしていない場合は false を返し、そうでなければ true を返します。

返値: boolean

reportValidity()

このエレメントが制約を満たしていない場合、ユーザに制約を満たしていないことを報告し、false を返します。そうでなければ true を返します。

返値: boolean

select()

コントロール内のテキスト全体を選択し、テキストにフォーカスを与えます。

setCustomValidity()

検証時に表示するエラーメッセージを設定します。

このメッセージを設定すると検証時に常にカスタムエラーが発生します。 カスタムエラーを解消するには空文字列を設定してください。

引数

  • message: string

    検証エラーに使用するメッセージです。

setRangeText()

指定された範囲内のテキストを与えられたテキストに置き換えます。

引数

  • replacement: string

    挿入する文字列です。

  • start: number （省略可）

    置換する最初の文字を０から始まる位置で指定します。既定では現在の selectionStart です。

  • end: number （省略可）

    置換する最後の文字の次の文字を０から始まる位置で指定します。既定では現在の selectEnd です。

  • selectMode: string （省略可）

    テキストを置換した後で、選択範囲をどのように設定するかを以下の中から指定します。既定では "preserve" です。

    • "select": 新規挿入したテキストを選択します。
    • "start": 挿入したテキストの直前に選択範囲を移動します。
    • "end": 挿入したテキストの直後に選択範囲を移動します。
    • "preserve": 選択範囲を保全しようとします。

setSelectionRange()

現在のテキスト選択範囲を設定します。

引数

  • selectionStart: number

    選択する最初の文字を０から始まる位置で指定します。テキストの長さより大きい値を指定した場合は末尾の位置となります。

    selectionEnd がこの値より小さい場合、どちらの値も selectionEnd として扱われます。

  • selectionEnd: number

    選択する最後の文字の次の文字を０から始まる位置で指定します。テキストの長さより大きい値を指定した場合は末尾の位置となります。

  • selectionDirection: string （省略可）

    選択が行われたとみなす方向を次の中から指定します。既定では "none" となります。

    • "forward"
    • "backward"
    • "none": 選択方向が不明、または無関係の場合です。

イベント

継承元の HTMLElement や内部に持つ <input> や <textarea> から送出されるイベントもあります。

change

コントロールの内容が変更され、フォーカスを失ったときに発火されます。

標準の change イベントと同じ内容ですが、カスタムイベントとして送出しています。

イベントオブジェクトの detail プロパティに以下のプロパティを割り当てています。

  • value: 変更された値です。

invalid

検証に失敗したときに発火されます。

select

コントロールの内容が選択されたときに発火されます。

標準の select イベントと同じ内容ですが、カスタムイベントとして送出しています。