2012年2月24日金曜日

[JavaScript][jQuery] inputのtype="file"であるときにvalueの値を空にする

jQueryで$(':file').val('')などをしても、実はtype="file"の時は消すことができない。

type="file"のvalueを操作させない。値が入力されても無視するという挙動は
HTMLの仕様ではなくて厳密にはブラウザのセキュリティポリシーに基づくものらしいが、
値をどうしても空にしたい時には困った挙動である。

inputのtype="reset"だとtype="file"の値も消すことはできるが、
フォームにあるinputやselect、textareaなどの値まで消してしまうのであまり使えない。

そういう時にはjQueryで

$(':file').replaceWith($(':file').clone())

と書くとうまいこと消すことができる。
:fileの部分はもちろん好きなセレクタで構わない。

やってることは単純で、type="file"のコピーを作り出し、
元のものと置き換えているだけである。

これは上記に述べた値を無視するという挙動を利用して、
新規に作成されたら(コピーされたら)値が消されるように仕向けている。

なお、イベントなどもコピーに引き継ぎたい場合は、
clone(true)と引数にtrueを入れるとイベントもコピーされる。

0 件のコメント:

コメントを投稿