Tabsを用いてタブを切り替えたときに, 入力フィールドにフォーカスさせる

こういうケースが多い気がする*1のでメモ.

<ul id="tabs">
  <li><a href="#foo">Foo</a></li>
  <li><a href="#bar">Bar</a></li>
</ul>
<div id="foo">
  <input type="text" />
</div>
<div id="bar">
  <input type="text" />
</div>

$('#tabs').tabs({
  select: function(event, ui) {
    $(ui.panel).find(':input:first').focus();
  }
});

tabsselectのイベント発生時にフォーカスさせるようにしてあげればいいんだけど, コレではうまくいかない…… どうやらこの段階でフォーカスを当てる要素が非表示(親の非表示が受け継がれている)で, 非表示だとフォーカスが当てられないらしい. ui.panelからui-tabs-hideというクラスを取り除いてあげればいいけど, パネルの高さがけっこうあると, 画面がちらつくコトがあってよくない. というコトで実行を関数の後にしてやる.

$('#tabs').tabs({
  select: function(event, ui) {
    setTimeout(function() { $(ui.panel).find(':input:first').focus() }, 0);
  }
});

まぁ妥当な解決かなぁ.

*1:特にコールバックを用るような仕組みのとき