要素

<input> 要素は主にフォームコンポーネントに使用され、HTMLInputElement インターフェイスを継承します。

HTMLInputElement のインスタンスプロパティ

特徴的な属性

name: <input> ノードの名前を示す文字列。このプロパティは読み取りおよび書き込み可能です。
type: <input> ノードのタイプを示す文字列。このプロパティは読み取りおよび書き込み可能です。
disabled: <input> ノードの使用が禁止されているかどうかを示すブール値。無効にすると、フォームの送信時に <input> ノードは含まれなくなります。このプロパティは読み取りおよび書き込み可能です。
autofocus: ページの読み込み時に要素が自動的にフォーカスを取得するかどうかを示すブール値。このプロパティは読み取りおよび書き込み可能です。
required: フォームの送信時に <input> 要素が必須かどうかを示すブール値。このプロパティは読み取りおよび書き込み可能です。
value: <input> ノードの値を表す文字列。このプロパティは読み取りおよび書き込み可能です。
validity: <input> ノードの検証ステータスを示す ValidityState オブジェクトを返します。このプロパティは読み取り専用です。
validationMessage: <input> ノードの検証が失敗したときにユーザーに表示されるエラーメッセージを示す文字列。ノードが検証を必要としない場合、または検証に合格した場合、この属性は空の文字列になります。このプロパティは読み取り専用です。
willValidate: フォームの送信時に <input> 要素が検証されるかどうかを示すブール値。このプロパティは読み取り専用です。

フォーム関連のプロパティ

form: <input> 要素が配置されているフォーム (<form>) ノードを返します。このプロパティは読み取り専用です。
formAction: フォーム送信時のサーバーターゲットを示す文字列。この属性は、読み取りおよび書き込み可能です。この属性が設定されると、form 要素の action 属性がオーバーライドされます。
formEncType: フォーム送信時のデータのエンコード方法を示す文字列。この属性は、読み取りおよび書き込み可能です。この属性が設定されると、form 要素の enctype 属性がオーバーライドされます。
formMethod: フォームが送信されるときの HTTP メソッドを示す文字列。このプロパティは、読み取りおよび書き込み可能です。このプロパティを設定すると、フォーム要素の method プロパティがオーバーライドされます。
formNoValidate: フォームの送信時に検証をスキップするかどうかを示すブール値。このプロパティは、読み取りおよび書き込み可能です。このプロパティを設定すると、フォーム要素の formNoValidate プロパティがオーバーライドされます。
formTarget: フォームの送信後にサーバーから返されるデータの開始位置を示す文字列。このプロパティは、読み取りおよび書き込み可能です。このプロパティを設定すると、フォーム要素の target プロパティがオーバーライドされます。

テキスト入力ボックスの固有のプロパティ

次の属性は、<input> 要素がテキストを入力できる場合にのみ有効です。

autocomplete: 文字列 on または off。<input> ノードの入力内容がブラウザによって自動的に補完できることを示します。このプロパティは読み取りおよび書き込み可能です。
maxLength: 入力できる文字列の最大長を示す整数。負の整数に設定すると、エラーが報告されます。このプロパティは読み取りおよび書き込み可能です。
size: <input> ノードの表示長を示す整数。タイプが「テキスト」または「パスワード」の場合、この属性の単位は文字数であり、それ以外の場合、単位はピクセルです。このプロパティは読み取りおよび書き込み可能です。
pattern: <input> ノードの値が満たすべき正規表現を表す文字列。このプロパティは読み取りおよび書き込み可能です。
placeholder: 要素のヒントとして、<input> ノードのプレースホルダーを表す文字列。文字列にはキャリッジリターンやラインフィードを含めることはできません。このプロパティは読み取りおよび書き込み可能です。
readOnly: ユーザーがノードの値を変更できるかどうかを示すブール値。このプロパティは読み取りおよび書き込み可能です。
min: ノードの最小値または日付を示す文字列。max 属性より大きくすることはできません。このプロパティは読み取りおよび書き込み可能です。
max: ノードの最大値または日付を示す文字列。min 属性より小さくすることはできません。このプロパティは読み取りおよび書き込み可能です。
selectionStart: 選択されたテキストの開始位置を示す整数。テキストが選択されていない場合は、<input> 要素内のカーソルの位置を返します。このプロパティは読み取りおよび書き込み可能です。
selectionEnd: 選択されたテキストの終了位置を示す整数。テキストが選択されていない場合は、<input> 要素内のカーソルの位置を返します。このプロパティは読み取りおよび書き込み可能です。
selectionDirection: 選択されたテキストの方向を示す文字列。可能な値には、「forward」 (テキストが書かれている方向と同じ方向)、「backward」 (テキストが書かれている方向と反対)、および「none」 (テキストの方向が不明) が含まれます。このプロパティは読み取りおよび書き込み可能です。

チェックボックスとラジオボタンの固有のプロパティ

<input> 要素のタイプがチェックボックスまたはラジオの場合、次の固有の属性を持ちます。

checked: <input> 要素がチェックされているかどうかを示すブール値。このプロパティは読み取りおよび書き込み可能です。
defaultChecked: <input> 要素がデフォルトでチェックされるかどうかを示すブール値。このプロパティは読み取りおよび書き込み可能です。
indeterminate: <input> 要素がまだ決定されていないどうかを示すブール値。ユーザーが 1 回クリックすると、この属性は false になり、ユーザーが確認済みステータスを与えたことを示します。このプロパティは読み取りおよび書き込み可能です。

画像ボタンの固有のプロパティ

<input> 要素のタイプが image の場合、イメージボタンとなり、次の固有の属性を持ちます。

alt: 文字列、画像が表示できない場合の代替テキスト。このプロパティは読み取りおよび書き込み可能です。
height: 要素の高さを示す文字列 (単位ピクセル)。このプロパティは読み取りおよび書き込み可能です。
src: この要素の画像ソースを示す文字列。このプロパティは読み取りおよび書き込み可能です。
width: 要素の幅 (単位ピクセル) を示す文字列。このプロパティは読み取りおよび書き込み可能です。

ファイルアップロードボタンの固有のプロパティ

<input> 要素のタイプが file の場合、ファイルアップロードボタンとなり、以下の固有の属性を持ちます。

accept: この要素が受け入れることができるファイルタイプを示す文字列。タイプを区切るにはカンマを使用します。このプロパティは読み取りおよび書き込み可能です。
files: アップロード用に選択された File インスタンスオブジェクトのセットを含む FileList インスタンスオブジェクトを返します。

その他のプロパティ

defaultValue: <input> ノードの元の値を表す文字列。
dirName: テキストの方向を示す文字列。
accessKey: <input> ノードがフォーカスを取得できるようにするアルファベットキーを表す文字列。
list: <datalist> ノードを返します。これは <input> 要素にバインドされている必要があり、<input> 要素の型はテキストを入力できる必要があります。そうでない場合は無効になります。。このプロパティは読み取り専用です。
multiple: 複数の値を選択できるかどうかを示すブール値。
labels: 現在の <input> ノードにバインドされている <label> 要素を表す NodeList インスタンスを返します。このプロパティは読み取り専用です。
step: min 属性と max 属性の間で増加または減少するたびの値または時間を表す文字列。
valueAsDate: Date インスタンス。一度設定されると、この <input> 要素の値は指定された日付として解釈されます。プロパティの値を解析できない場合、<input> ノードの値は null になります。
valueAsNumber: 浮動小数点数。現在の <input> 要素の値がこの値として解析されます。入力ボックスが空の場合、このプロパティは NaN を返します。

以下は valueAsNumber プロパティの例です。

/* HTMLコードは以下の通り
   <input type="number" value="1.234" />
*/

input.value // "1.234"
input.valueAsNumber // 1.234

HTMLInputElement のインスタンスメソッド

focus(): 現在の <input> 要素がフォーカスを取得します。
blur(): <input> 要素のフォーカスを削除します。
select(): <input> 要素内のすべてのテキストを選択します。このメソッドは、<input> がフォーカスを取得することを保証しません。最初に focus() メソッドを使用してから、このメソッドを使用するのが最善です。
click(): 現在の <input> 要素上でのマウスクリックをシミュレートします。
setSelectionRange(): <input> 要素内のテキストの一部を選択しますが、選択したテキストにフォーカスを移しません。このメソッドは 3 つのパラメータを受け入れます。最初のパラメータは開始位置 (0 から開始)、2 番目のパラメータは終了位置 (この位置を除く)、3 番目のパラメータはオプションであり、選択された方向を示します。 (forward、backward、およびデフォルト値 none)。
setRangeText(): 選択したテキストが新しいテキストに置き換えられます。このメソッドは 4 つのパラメータを受け入れます。最初のパラメータは新しいテキスト、2 番目のパラメータは置換の開始位置 (「0」から計算)、3 番目のパラメータは終了位置 (この位置は含まれません)、そして4 つのパラメータは置換後の動作 (オプション) を表し、4 つの可能な値があります: select (新しく挿入されたテキストを選択)、start (カーソル位置が挿入されたテキストの前に移動)、end (カーソルの位置は挿入されたテキストの後に移動)、preserve (デフォルト値、最初に選択されたテキストがあり、現在の置換位置が元の選択位置と交差する場合、新しく挿入されたテキストと最初に選択されたテキストが同時に選択されます)それ以外の場合は、最初に選択されたテキストが残ります)。
setCustomValidity(): このメソッドは、検証が失敗した場合のエラーメッセージをカスタマイズするために使用されます。そのパラメータはエラーメッセージです。カスタムエラーメッセージを設定すると、フィールドは検証されないことに注意してください。そのため、ユーザーが再入力するときは、カスタムエラーメッセージを空の文字列に設定する必要があります。以下の例を参照してください。
checkValidity(): 現在のノードの検証結果を示すブール値を返します。「false」が返された場合は、検証要件が満たされていないことを意味します。それ以外の場合、検証は成功したか、検証する必要はありません。
stepDown(): 現在の <input> ノードの値を 1 段階減らします。このメソッドはパラメータとして整数「n」を受け取ることができます。これは、一度に「n」ステップを減らすことを意味します。デフォルトは「1」です。エラーがスローされる状況はいくつかあります。現在の <input> ノードがデクリメントまたはインクリメントに適していない、現在のノードに step 属性がない、<input> ノードの値がデクリメントまたはインクリメントできない、などです。数値に変換され、減分後の値が min 属性より小さいか、または max 属性より大きい。
stepUp(): 現在の <input> ノードの値を 1 ステップずつ増やします。その他は stepDown() メソッドと同じです。

以下は setSelectionRange() メソッドの例です。

/* HTMLコードは以下の通り
  <p><input type="text" id="mytextbox" size="20" value="HelloWorld"/></p>
  <p><button onclick="SelectText()">テキストを選択</button></p>
*/

関数 SelectText() {
  var input = document.getElementById('mytextbox');
  input.focus();
  input.setSelectionRange(2, 5);
}

上記のコードでは、ボタンをクリックすると、「llo」という 3 つの文字が選択されます。

以下は「setCustomValidity()」の例です。

/* HTMLコードは以下の通り
  <form id="フォーム">
    <input id="field" type="text" pattern="[a-f,0-9]{4}" autocomplete=off>
  </form>
*/

const form = document.querySelector('#form');
const フィールド = document.querySelector('#field');

form.addEventListener('submit', (e) => {
  e.preventDefault(); // この例が POST リクエストを行わないようにする
});

field.oninvalid = (イベント) => {
  event.target.setCustomValidity('4 桁の 16 進数である必要があります');
}

field.oninput = (イベント) => {
  イベント.target.setCustomValidity('');
}

上記のコードでは、入力ボックスに 4 桁の 16 進数を入力する必要があります。条件が満たされていない場合 (たとえば、「xxx」と入力した場合)、Enter キーを押した後、カスタマイズされたエラーメッセージが表示されます。エラーメッセージをカスタマイズすると、入力ボックスは常に検証失敗状態になるため、再入力する場合はカスタムエラーメッセージを空の文字列に設定する必要があります。さらに、オートコンプリートプロンプトボックスがエラーメッセージを隠さないようにするには、入力ボックスの autocomplete 属性をオフにする必要があります。

作者: wangdoc

アドレス: https://wangdoc.com/

ライセンス: クリエイティブ・コモンズ 3.0

前の章次の章

要素

HTMLInputElement のインスタンス プロパティ