ブラウザによって「元に戻す（Ctrl+Z）」の扱いが違う

Tweet

Category JavaScript 2012/09/29

問題

textarea要素やinput要素など、入力可能な要素の値をJavascriptで変更すると、IEでは、元に戻す（Ctrl+Z）ができなくなるみたい。

答え

・Firefoxの「元に戻す」は、個々の入力欄でできるようだ。

1) 入力欄Aに入力。
2) 入力欄Bに入力。
3) 入力欄Aで「元に戻す」
→ Aが元に戻る。Bはそのまま。

・IE、Chromeの「元に戻す」は画面全体でできるようだ。

1) 入力欄Aに入力。
2) 入力欄Bに入力。
3) 入力欄Aで「元に戻す」
→ Bから順番に元に戻る。Bを元に戻してからAが元に戻る。

IE、Chromeの、画面全体にわたって元に戻すがおこなわれるパターンで、以下のようにまた動きが分かれる。

1) 入力欄Aに入力。
2) 入力欄Bに入力。
3) 入力欄Cがスクリプトによって値を書き換えられる。
4) 入力欄Aで「元に戻す」
→ IEだと、3が発生したことで、もう元に戻らなくなる。
　Chromeだと、3が発生しても、Bをかつての入力値に元に戻して、Aがかつての入力値に元に戻る。

こんなことで、IEの「元に戻す」ができなくなるのでした。

デモ