kitak blog

Kみたいなエンジニアになりたいブログ

MobileSafariでテキストボックスを全選択させる

小さいんですが、1年に1回くらい同じことでハマっている気がするのでメモ。

よくテキストボックスを全選択させるためにJSでこんなコードを書いたりする。

var content = document.getElementById('content');
content.focus();
content.selectionStart = 0;
content.selectionEnd = content.textContent.length;

これがそのままだとMobileSafariでは動かない。以下のように画面に触れることで発生するイベント(touchstartやclickだ)のイベントリスナーの中に処理を移せば動く。

var content = document.getElementById('content');

someArea.addEventListener('touchend', function () {
  content.focus();
  content.selectionStart = 0;
  content.selectionEnd = content.textContent.length;
});

iOSでは選択はユーザーによる操作が伴わないといけない、という制約によるものらしい。言いたいことは理解できるが、雑な表現だけど、Appleっぽいな、と思ってしまった。

こういったMobileSafari特有の制約や振る舞いのようなものはけっこうあるのだけど、中には回避するハックがあったりする。
ハックを目にすると、好奇心がくすぐられて火がつくのだけど、結局はOSのバージョンがあがって防がれて、また回避策がみつかって、と、イタチごっこを繰り返している。積み重なった一見意味不明なハックの記述を誰がメンテするのか。そこにかけた時間を他にまわしたほうがよかったんじゃないのか。ハックはほどほどに、という自分への戒め。