フォームのJavaScript

フォームでJavaScriptで何かするときの参考用です。
フォームのCSS、フォームのHTMLも併せてご参照ください。

フォーカス

フォーカス状態の変更イベント

html

<form name="contactForm">
  <input name="focusTest" />
</form>

js

const focusTest = document.contactForm.focusTest;
 
focusTest.addEventListener("focus", () => {
  console.log("フォーカスされた");
});
 
focusTest.addEventListener("blur", () => {
  console.log("フォーカスが外れた");
});

input [type="text"]

値の取得

html

<form name="contactForm">
  <input name="inputText" type="text" value="こんにちは" />
</form>

js

const inputText = document.contactForm.inputText;
 
console.log(inputText.value);

値の変更

html

<form name="contactForm">
  <input name="inputText" type="text" value="こんにちは" />
</form>

js

const inputText = document.contactForm.inputText;
 
inputText.value = "こんばんは";

値の変更イベント

イベント	タイミング
change	値変更されて、フォーカスが外れた時、Enterが押された時
input	キー入力時

html

<form name="contactForm">
  <input name="inputText" type="text" value="こんにちは" />
</form>

js

const inputText = document.contactForm.inputText;
 
inputText.addEventListener("change", () => {
  console.log("値が変更された");
})
 
inputText.addEventListener("input", () => {
  console.log("キーが押された");
})

input[type="range"]

値の取得

html

<form name="contactForm">
  <input name="inputRange" type="range">
 /form>

js

const inputRange = document.contactForm.inputRange;

console.log(inputRange.value);

値の変更

html

<form name="contactForm">
  <input name="inputRange" type="range">
</form>

js

const inputRange = document.contactForm.inputRange;
 
inputRange.value = 100;

値の変更イベント

イベント	タイミング
change	止まってから
input	動くたび

html

<form name="contactForm">
  <input name="inputRange" type="range">
</form>

js

const inputRange = document.contactForm.inputRange;
 
inputRange.addEventListener("change", () => {
  console.log(inputRange.value);
});

input[type="color"]

値の取得

html

<form name="contactForm">
  <input name="inputColor" type="color">
</form>

js

const inputColor = document.contactForm.inputColor;
 
console.log(inputColor.value);

値の変更

html

<form name="contactForm">
  <input name="inputColor" type="color">
</form>

js

const inputColor = document.contactForm.inputColor;

inputColor.value = "#ffffff";

値の変更イベント

html

<form name="contactForm">
  <input name="inputColor" type="color">
</form>

js

const inputColor = document.contactForm.inputColor;

inputColor.addEventListener("change", () => {
  console.log(inputColor.value);
})

input[type="file"]

ファイル情報の取得

html

<form name="contactForm">
  <input name="inputfile" type="file" multiple>
</form>

js

const inputfile = document.contactForm.inputfile;

inputfile.addEventListener("change", () => {
 
  for (let i = 0; i < event.target.files.length; i++) {
 
    console.log(`ファイル名:${event.target.files[i].name}`);
    console.log(`ファイルサイズ:${event.target.files[i].size}`);
    console.log(`ファイルタイプ:${event.target.files[i].type}`);
    console.log(`ファイル最終更新日時:${event.target.files[i].lastModifiedDate}`);
    console.log(`ファイル最終更新日時(UNIXタイムスタンプ):${event.target.files[i].lastModified}`);
     
  }
 
});

テキストファイルの内容を読み込む

html

<form name="contactForm">
  <input name="inputfile" type="file" multiple accept=".txt">
</form>

js

const inputfile = document.contactForm.inputfile;
 
inputfile.addEventListener("change", () => {
 
  for (let i = 0; i < event.target.files.length; i++) {
 
    console.log(`ファイル名:${event.target.files[i].name}`);
    console.log(`ファイルサイズ:${event.target.files[i].size}`);
    console.log(`ファイルタイプ:${event.target.files[i].type}`);
    console.log(`ファイル最終更新日時:${event.target.files[i].lastModifiedDate}`);
    console.log(`ファイル最終更新日時(UNIXタイムスタンプ):${event.target.files[i].lastModified}`);
 
    const txtReader = new FileReader();
 
    txtReader.addEventListener("load", () => {
       console.log(txtReader.result);
    });
 
    txtReader.readAsText(event.target.files[i]);
 
  }
 
});

画像をDataURLとして読み込んで表示

html

<form name="contactForm">
  <input name="inputfile" type="file" multiple accept=".jpg,.png,.gif,.svg">
</form>
<div id="js-imgArea"></div>

js

const inputfile = document.contactForm.inputfile;
const imgArea = document.querySelector("#js-imgArea");

inputfile.addEventListener("change", () => {
 
  for (let i = 0; i < event.target.files.length; i++) {
   
    console.log(`ファイル名:${event.target.files[i].name}`);
    console.log(`ファイルサイズ:${event.target.files[i].size}`);
    console.log(`ファイルタイプ:${event.target.files[i].type}`);
    console.log(`ファイル最終更新日時:${event.target.files[i].lastModifiedDate}`);
    console.log(`ファイル最終更新日時(UNIXタイムスタンプ):${event.target.files[i].lastModified}`);
 
    const imgReader = new FileReader();
     
    imgReader.addEventListener("load", () => {
      const img = document.createElement("img");
      img.src = imgReader.result;
      imgArea.appendChild(img);
    });
    
    imgReader.readAsDataURL(event.target.files[i]);

  }

});

ラジオボタン

値の取得

html

<form name="contactForm">
  <input type="radio" name="radioGroup" id="form__input--radio1" value="a" checked>
  <label for="form__input--radio1">a</label>
  <input type="radio" name="radioGroup" id="form__input--radio2" value="b">
  <label for="form__input--radio2">b</label>
</form>

js

const radioGroup = document.contactForm.radioGroup;
 
console.log(`${radioGroup.value}が選択されている`);

値の変更

html

<form name="contactForm">
  <input type="radio" name="radioGroup" id="form__input--radio1" value="a" checked>
  <label for="form__input--radio1">a</label>
  <input type="radio" name="radioGroup" id="form__input--radio2" value="b">
  <label for="form__input--radio2">b</label>
</form>

js

const radioGroup = document.contactForm.radioGroup;

radioGroup.value = "b";

値の変更イベントを取得

html

<form name="contactForm">
  <input type="radio" name="radioGroup" id="form__input--radio1" value="a">
  <label for="form__input--radio1">a</label>
  <input type="radio" name="radioGroup" id="form__input--radio2" value="b">
  <label for="form__input--radio2">b</label>
</form>

js

const form = document.contactForm;

form.addEventListener("change", () => {
  console.log(`${form.radioGroup.value}が選択された`);
});

チェックボックス

値の取得

html

<form name="contactForm">
  <input name="checkbox1" type="checkbox" checked>
  <input name="checkbox2" type="checkbox">
</form>

js

const checkbox1 = document.contactForm.checkbox1;
console.log(checkbox1.checked);

const checkbox2 = document.contactForm.checkbox2;
console.log(checkbox2.checked);

値の変更

html

<form name="contactForm">
  <input name="checkbox" type="checkbox">
</form>

js

const checkbox = document.contactForm.checkbox;

checkbox.checked = true;

値の変更イベント

イベント	タイミング
change	値が変更されて、フォーカスが外れた時

html

<form name="contactForm">
  <input name="checkbox" type="checkbox">
</form>

js

const checkbox = document.contactForm.checkbox;
        
checkbox.addEventListener("change", () => {
  console.log("チェックボックスの状態が変更された");

  if (checkbox.checked === false) {
    console.log("チェックが外れた");
  }

  if (checkbox.checked === true) {
    console.log("チェックされた");
  }
 
});

セレクトボックス

値の取得

html

<form name="contactForm">
  <select name="select">
    <option value="a">a</option>
    <option value="b" selected>b</option>
    <option value="c">c</option>
  </select>
</form>

js

const select = document.contactForm.select;
 
console.log(select.value);

値の変更

html

<form name="contactForm">
  <select name="select">
    <option value="a">a</option>
    <option value="b" selected>b</option>
    <option value="c">c</option>
  </select>
</form>

js

const select = document.contactForm.select;
 
select.value = "c";

値の変更イベント

html

<form name="contactForm">
  <select name="select">
    <option value="a">a</option>
    <option value="b" selected>b</option>
    <option value="c">c</option>
  </select>
</form>

js

const select = document.contactForm.select;
 
select.addEventListener("change", () => {
  console.log(`${select.value}が選択された`);
})

textarea

値の取得

html

<form name="contactForm">
  <textarea name="textarea">こんにちは</textarea>
</form>

js

const textarea = document.contactForm.textarea;

console.log(textarea.value);

値の変更

html

<form name="contactForm">
  <textarea name="textarea">こんにちは</textarea>
</form>

js

const textarea = document.contactForm.textarea;

textarea.value = "こんばんは";

値の変更イベント

イベント	タイミング
change	値変更されて、フォーカスが外れた時
input	キー入力時

html

<form name="contactForm">
  <textarea name="textarea">こんにちは</textarea>
</form>

js

const textarea = document.contactForm.textarea;
 
textarea.addEventListener("change", () => {
  console.log("値が変更された");
});
 
textarea.addEventListener("input", () => {
  console.log("キーが押された");
});

submit

フォームの送信前イベント

html

<form name="contactForm" action="thanks.php" method="post">
  <button type="submit">送信</button>
</form>

js

const form = document.contactForm;
 
  form.addEventListener("submit", () => {
 
  const confirmFlag = confirm("送信OK？");
  console.log(confirmFlag);
 
  if (confirmFlag === false) {
    event.preventDefault();
  }
 
})

イベントの移譲

子要素を挿入した場合に新たなイベントリスナーを追加する必要がありません。

フォーム内のすべてのinputにイベントリスナーを追加する例

html

<form name="contactForm" action="thanks.php" method="post">
  <input type="text">
  <input type="tel">
  <input type="date">
  <input type="email">
</form>

js

contactForm.addEventListener('change', (e) => {
     const target = e.target;
     if (target.matches('input')) {
         console.log(target.value)
     }
 });