投稿

ラベル(javascript)が付いた投稿を表示しています

IEにおけるinput type=file エレメントのコピー時の注意点

イメージ
clone()メソッド エレメントのコピーにはclone()メソッドを使用します。 html <input type="file" class=" ImageFileInput "> javascript var real = $(".ImageFileInput"); var cloned = real.clone(true);cloned.insertAfter(real); IEではfileの中身がコピーされない input type=file の場合、エレメントそものはclone()でコピーされますが、 inputに添付したファイルの値はIEではコピーされません(IE11で確認)。 console.log(cloned.val()) ; //IEだと""(カラ),肝心の中身がない! console.log(cloned.[0].files[0].name) ; //IEでも引き継がれている console.log(cloned.[0].files[0].size) ; //IEでも引き継がれている 回避策:値だけ直接コピーする cloned.val( real.val() ) ;

INDEX データが1件の時だけ、JavaScriptの必須チェックが誤動作する

原因 JavaScript上でフォーム部品は、同名の要素が複数あるときのみ配列として扱われます。従って、今回のバグのようにチェックボックスが1個の時は、配列の長さを表すlengthプロパティが未定義(undefined)となり、for文の中に制御が移りません。 for (var i=0; i<sentakuChk.length; i++) { ←ここでsentakuChk.lengthが取得できない 結果、表示データが1件のみの時は選択状態にかかわらず、エラーメッセージが表示されてしまいます。 対策 動的に数が変わる同名のフォーム部品をJavaScriptで扱うときは、数が1個の時と複数の時で分けて処理を書きます。 プログラム修正例 チェックボックスが1個か複数かは、JavaScriptでのチェックボックスを表すプロパティが配列になっているかどうか(=lengthプロパティがあるかどうか)で判断できます。 チェックボックス1個の場合に対応したソース function check() {   var sentakuChk = document.form1.sentakuChk;   // チェックボックスが複数の時   if (sentakuChk.length) {     for (var i=0; i<sentakuChk.length; i++) {       if (sentakuChk[i].checked) {         return true;       }     }   // チェックボックスが1個の時   } else if (sentakuChk.checked) {     return true;   }   alert("1件も選択されていません。");   return false;...