「テキストボックスのフォーカス時に全選択状態にする」をクロスブラウザ対応
フロント開発の楽しさを定量化するとキルミーベイベー第5話ぐらいはありますが、クロスブラウザ対応となると途端にキルミーベイベー第1話ぐらいの楽しさになってしまうというのは皆さんもご存知の通りです。
「テキストボックスのフォーカス時に全選択状態にする」という機能は難易度的に大したものではなく、30分ぐらいでできるよね? みたいなノリで振られると思うのですが、何も考えずに
<input id="test"></input>
var input = document.getElementId("test"); input.onfocus = focusInput; function focusInput(e) { if (e) { var target = e.target; target.select(); } }
で実装したらAndroidとかMobile Safariとかで動かなくてえらい目にあいました。
そろそろ世の中に存在するブラウザの総数を規制してもらわないとクロスブラウザテストはやってられなくなりますし、
IE8以下はレッドデータブックに載せずに早く絶滅させた方が良いのですが、とりあえず以下のコードで対応しました。
var input = document.getElementId("test"); input.onfocus = focusInput; function focusInput(e) { if (e) { (function(e){ setTimeout( function() {setFocus(e);}); })(e); } } function setFocus(e) { if (e) { var targetTag = e.target; targetTag.focus(); //とりあえず全選択、選択範囲指定したいときはbgnとendを適宜指定 var num = targetTag.value.length; var bgn = 0; var end = num; if(typeof(targetTag.selectionStart) != "undefined"){ targetTag.selectionStart = bgn; targetTag.selectionEnd = end; } else if(document.selection) { var range = targetTag.createTextRange(); range.collapse(); range.moveEnd( "character", bgn ); range.moveStart( "character", end ); range.select(); } } }
FireFox,Chrome,Safari,IE9,IE11,Android標準ブラウザ,Mobile Safari(iOS7)ではとりあえず動きました。 何か問題ありましたら教えてください。