0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

前段

 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 にベタ書きで書いた inputtextarea で、下段は DOM から生成した同じものである。いずれもプレースホルダに "placeholder"、値に "value" を設定している。IE10/11 で表示したときだけ、ロードした段階でひとつだけプレースホルダ扱いになっている、つまり、textarea を DOM から生成したときのみ、規定値がプレースホルダとして解釈されていることがわかる。

IE10/11 ではロード時に値がプレースホルダ扱いされる

開発者ツール…

 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)で確認されたものなので、特に影響はないだろう。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?