input要素にスペース、改行文字、タブ文字を入力すると、ブラウザの仕様によって入力値がサニタイズされることがあります。
この記事では入力する方法、入力する文字、入力する文字の位置、ブラウザごとの挙動の差異を確認するHTMLを共有し、検証結果をまとめます。
TL;DR
- Google Chrome, Safari, Firefoxの挙動に差異はなかった
- 改行文字（LF,CR）のサニタイズについてはWHATWGがHTMLの仕様として定めていた
- タブ文字、スペースのサニタイズについてはHTMLの仕様として定められていなかった
| 項目 | 特徴的な挙動 |
|---|---|
| 改行 (LF/CRLF) | HTML、JavaScriptでは無視される。コピペ時は末尾以外は半角スペースに変換される。末尾は無視される。 |
| タブ (\t) | そのまま |
| 半角・全角スペース | そのまま |
比較の観点
ブラウザ
- Google Chrome
- Safari
- Firefox
入力方法
- JavaScriptでinput要素のvalue属性を指定
- HTMLでinput要素にvalue属性の初期値の指定
- クリップボードからペースト
- LF,CR,タブ文字についてはテキストエディタの影響がないように
pbcopyコマンドを使ってクリップボードに保持する様にしました
- LF,CR,タブ文字についてはテキストエディタの影響がないように
# クリップボードに [LF]A[LF]B[LF] を保持
printf "\nA\nB\n" | pbcopy
入力する文字
- 半角スペース
- 全角スペース
- 改行文字(LF,CRLF)
- タブ文字
文字の入力位置
- 先頭
- 中央
- 末尾
使用したHTML
gemini-cliに手伝ってもらいながら作成し、Sandboxに置いておきました
詳細比較データ
挙動の表記例：
-
保持: そのままの文字コードで値に含まれる -
SP置換: 半角スペース (U+0020) に置き換わる -
削除: 文字が取り除かれる
1. JavaScript による代入 (input.value = "...")
| 文字 | 位置 | Chrome | Safari | Firefox | 備考 |
|---|---|---|---|---|---|
| LF (\n) | 先頭 | 削除 | 削除 | 削除 | |
| 途中 | 削除 | 削除 | 削除 | ||
| 末尾 | 削除 | 削除 | 削除 | ||
| CRLF (\r\n) | 先頭 | 削除 | 削除 | 削除 | |
| 途中 | 削除 | 削除 | 削除 | ||
| 末尾 | 削除 | 削除 | 削除 | ||
| Tab (\t) | 先頭 | 保持 | 保持 | 保持 | |
| 途中 | 保持 | 保持 | 保持 | ||
| 末尾 | 保持 | 保持 | 保持 | ||
| 半角スペース | 先頭 | 保持 | 保持 | 保持 | |
| 途中 | 保持 | 保持 | 保持 | ||
| 末尾 | 保持 | 保持 | 保持 | ||
| 全角スペース | 先頭 | 保持 | 保持 | 保持 | |
| 途中 | 保持 | 保持 | 保持 | ||
| 末尾 | 保持 | 保持 | 保持 |
2. クリップボードからのペースト
textarea などからコピーした複数行テキストを貼り付けた際の挙動。
| 文字 | 位置 | Chrome | Safari | Firefox | 備考 |
|---|---|---|---|---|---|
| LF (\n) | 先頭 | SP変換 | SP変換 | SP変換 | |
| 途中 | SP変換 | SP変換 | SP変換 | ||
| 末尾 | 削除 | 削除 | 削除 | ||
| CRLF (\r\n) | 先頭 | SP変換 | SP変換 | SP変換 | |
| 途中 | SP変換 | SP変換 | SP変換 | ||
| 末尾 | 削除 | 削除 | 削除 | ||
| Tab (\t) | 先頭 | 保持 | 保持 | 保持 | |
| 途中 | 保持 | 保持 | 保持 | ||
| 末尾 | 保持 | 保持 | 保持 | ||
| 半角スペース | 先頭 | 保持 | 保持 | 保持 | |
| 途中 | 保持 | 保持 | 保持 | ||
| 末尾 | 保持 | 保持 | 保持 | ||
| 全角スペース | 先頭 | 保持 | 保持 | 保持 | |
| 途中 | 保持 | 保持 | 保持 | ||
| 末尾 | 保持 | 保持 | 保持 |
3. HTML value 属性による初期値
HTMLソースに記述された値が DOM 構築時にどう解釈されるか。
| 文字 | 位置 | Chrome | Safari | Firefox | 備考 |
|---|---|---|---|---|---|
| LF (\n) | 先頭 | 削除 | 削除 | 削除 | |
| 途中 | 削除 | 削除 | 削除 | ||
| 末尾 | 削除 | 削除 | 削除 | ||
| CRLF (\r\n) | 先頭 | 削除 | 削除 | 削除 | |
| 途中 | 削除 | 削除 | 削除 | ||
| 末尾 | 削除 | 削除 | 削除 | ||
| Tab (\t) | 先頭 | 保持 | 保持 | 保持 | |
| 途中 | 保持 | 保持 | 保持 | ||
| 末尾 | 保持 | 保持 | 保持 | ||
| 半角スペース | 先頭 | 保持 | 保持 | 保持 | |
| 途中 | 保持 | 保持 | 保持 | ||
| 末尾 | 保持 | 保持 | 保持 | ||
| 全角スペース | 先頭 | 保持 | 保持 | 保持 | |
| 途中 | 保持 | 保持 | 保持 | ||
| 末尾 | 保持 | 保持 | 保持 |