JSは、Safariの

Question

[JSFIDDLE]

コードはサファリを除くすべてのブラウザで完璧に動作でファイルに入力タイプを変更することはできません入力タイプをfileに変更してください。

まず、なぜこのようなことが起こっていますか？

Safariで入力タイプをfileに動的に変更する作業がありますか？

Answer 1

私はこの問題をSafariと古いバージョンのIEでのみ見たことがあります。その理由については、私はこのことについて何も書かれていません。

jQuery自体がtype属性の変更をinputのために無効にしていたため、IEで問題が発生していました。あなたはthis questionでこの問題に関するより多くの情報を見つけることができます

// We can't allow the type property to be changed (since it causes problems in IE) 
if (name == "type" && jQuery.nodeName(elem, "input") && elem.parentNode) 
    throw "type property can't be changed"; 

：それは次のように記載されていました。

最近では、もはやそうではないようですが、タイプをfileに変更するとSafariはまだ黙って失敗しています。一方、fileからの変更は問題なく動作します。これは文書化されていないので、私はいつもそれが "安全保障"対策であると仮定してきましたが、具体的な証拠は一度も見つかりませんでした。

私が使用している回避策は、新しいタイプがfileであることを検出し、この特殊なケースで新しいinputエレメントを作成し、そのタイプをファイルに設定し、そのIDを設定し、既存の入力を新しいものに置き換えます。

var input = $('#input'); 

$('button[id^=type-]').on('click', function() { 
    var type = $(this).attr('id').replace('type-', ''); 

    if (type === 'file') { 
    var newElement = document.createElement('input'); 
    newElement.type = type; 
    newElement.id = input.attr('id'); 

    input.replaceWith(newElement); 
    input = $('#input'); 
    } else { 
    input.attr('type', type); 
    } 

    $('#debug-info').html(
    'Trying to change the input type to <strong>' + type + '</strong>.<br>' + 
    'Actual input type is <strong>' + input.attr('type') + '<strong>.' 
); 

    if (type == input.attr('type')) { 
    $('#debug-info').css('color', 'green'); 
    } else { 
    $('#debug-info').css('color', 'red'); 
    } 
}); 

this fiddleで確認できます。