IE10/11のplaceholderについてのメモ

前段

　Google Apps Script でちょっとしたシステムを作った。スプレッドシートに設問内容を書いておいて、それをロードして HtmlService を介して入力フォームを表示するもので、完成して運用もしていた。全体を ES5 で書いて IE でも動くようにしたつもりだったが、なにやら不具合報告をいただいたので、原因は結局よくわからなかったが、調査した結果をメモしておく。

IE のプレースホルダはやや特殊

　HTML5 で導入された placeholder 属性が IE で微妙な挙動をすることはよく知られている。たとえばフォーカス時の動作が微妙に異なっており、Chrome や Firefox などの一般的なモダンブラウザでは、テキストエリア選択中でも値が空であればプレースホルダが表示される。IE10/11 ではフォーカスを外すまで表示されない（IE9 以下ではそもそも実装されていない）。

参考：placeholder のブラウザごとの違い＆その対処法など

DOM で生成したときのバグ

　IE10/11 の placeholder については、html にベタ書きするか、DOM から動的に生成するかによっても異なる挙動をするようだ。たとえば以下のようにして placeholder と 値 が両方とも入った textarea を DOM から生成してみる。

<script>
  window.onload = function(){
    var ta = document.createElement("textarea");
    ta.setAttribute("placeholder", "placeholder");
    ta.textContent = "value";
    document.getElementById("placeForInsert").appendChild(ta);
  }
</script>
　 ↓ ↓ ↓
<span id="placeForInsert">
  <textarea placeholder="placeholder">value</textarea>
</span>

　これを IE10/11 で実行すると、見た目は Chrome などと同様に "value" が入力されたテキストエリアが表示されるが、テキストエリアをクリックすると、この "value" は消失し、テキストエリアは空欄となる。さらにフォーカスを外すと、真のプレースホルダ "placeholder" が表示される。非常に不可解な挙動。

　どうやら IE10/11 では、このように DOM から生成した textarea は値の規定値がなぜかプレースホルダとして解釈される らしい。わかりやすいように style でプレースホルダを赤色にして対照してみよう。次の画像は比較用に作成したページを IE10/11 でロードした直後の画面であるが、上段は html にベタ書きで書いた input と textarea で、下段は DOM から生成した同じものである。いずれもプレースホルダに "placeholder"、値に "value" を設定している。IE10/11 で表示したときだけ、ロードした段階でひとつだけプレースホルダ扱いになっている、つまり、textarea を DOM から生成したときのみ、規定値がプレースホルダとして解釈されていることがわかる。

開発者ツール…

　IE11 の開発者ツールの DOM Explorer でソースをチェックしてみる。テキストエリアをクリックする前にソースを開いて確認するときちんと意図通りのタグをしているが、クリックして上述の現象が起きたあとに確認すると、規定値がすげ変わっている。IE の DOM Explorer はそもそもソースをチェックするものではないので、まあ観測した時点で確定するということで。

<!-- when opening before click -->
<textarea placeholder="placeholder">value</textarea>

<!-- when opening after click -->
<textarea placeholder="placeholder">placeholder</textarea>

対策

　原理がよくわからないが、プレースホルダは乱用するとフォームの可用性を損なうものでもあるので、IE 対応をするならプレースホルダの使用を控えるしかなさそう。

補足

　検証はローカルで行なったが、現象自体は本番環境（GAS）で確認されたものなので、特に影響はないだろう。