【jQuery】sortable()を設定したタグ内のtextarea, inputタグに入力出来ない

2014年09月01日

  1. TOP
  2. BLOG
  3. HTML
  4. 【jQuery】sortable()を設定したタグ内のtextarea, inputタグに入力出来ない

textareaタグやinput type=”text”等でフォーカスもしくはクリックしても入力が出来ないバグがありました。

しかもこれGoogle Chromeでは入力できるけどfirefoxでは入力が出来ないブラウザ依存してますね。
で、原因は上記のタグを囲うタグにsortable()が設定されているためです。

要はD&Dで配置移動出来る関数なのですが、
クリックイベントがD&Dの方に持ってかれて入力が出来ないのが原因みたいです。

これはバグとしても報告されており、解決方法も記載されています。
http://bugs.jqueryui.com/ticket/4429

要はsotable()のところに以下のように追加しましょうということでした。

$('#form_fields').sortable();
$('#form_fields input').bind('click.sortable mousedown.sortable',function(ev){
    ev.target.focus();
});