HTML5 の autofocus 属性を jQuery でクロスブラウザに

一部を修正して Gist に置きました。IE6 と 7 で autofocus 属性値を省略すると動作しない件にも対応しています。

HTML5 ではフォームのコントロールに autofocus 属性 が定義されています。その名のとおり、ページが読み込まれたときにコントロールに自動でフォーカスするためのものです。

<input type="search" name="s" autofocus>
<input type="submit" value="Search">

現時点では Safari 5.0、Chrome 5.0、Opera 10.60 がサポートしています。そこで、前回の placeholder の記事 と同様に、IE6–8 や Firefox でも HTML5 で autofocus を扱えるように jQuery スクリプトを書いてみました。

$(function () {
  var supportsInputAttribute = function (attr) {
    var input = document.createElement('input');
    return attr in input;
  };
  if (!supportsInputAttribute('autofocus')) {
    $('[autofocus]').focus();
  }
});

とても簡単です。まず autofocus 属性がサポートされているか調べ、もしサポートされていなければ focus() メソッドで autofocus 属性を持つ要素にフォーカスします。デモ を用意したので確認してみてください。

なお、autofocus は boolean attribute なので、前述のマークアップ例のように属性の省略記法が使えるのですが、そうすると IE6 と 7 ではこのスクリプトが動作しません。そのため以下のように属性名と値を省略せずに書く必要があります。

<input type="search" name="s" autofocus="autofocus">