フォームのJavaScript

フォームでJavaScriptで何かするときの参考用です。
[フォームのCSS](https://qiita.com/takeshisakuma/items/4218822871af486c8469)、[フォームのHTML](https://qiita.com/takeshisakuma/items/8198e78e28d346350868)も併せてご参照ください。

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

```: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)
     }
 });
```