JS - Kann nicht den Eingabetyp ändern in Safari

Question

[JSFIDDLE]

Der Code in jedem Browser funktioniert außer Safari perfekt auf FILE:

Aus unbekannten Grund Safari kann nicht dynamisch Ändern Sie den Eingabetyp in file.

Vor allem: warum das passiert?

Und gibt es irgendwelche Workaroud, um dynamisch den Eingangstyp zu file in Safari zu ändern?

Answer 1

Ich habe dieses Problem nur bei Safari und alten Versionen von IE gesehen. In Bezug auf den Grund habe ich nie etwas dokumentiert in dieser Sache gefunden.

An einem Punkt war jQuery selbst deaktiviert Änderungen am type Attribut für eine input, weil es Probleme in IE verursacht. Es wurde dokumentiert, wie:

// 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"; 

Sie können in this question zu diesem Thema weitere Informationen finden.

Heutzutage scheint es nicht länger der Fall zu sein, aber Safari scheitert immer noch, wenn der Typ in file geändert wird. Auf der anderen Seite funktioniert es problemlos von file zu ändern. Da dies nicht dokumentiert ist, habe ich immer angenommen, dass es sich um "Sicherheitsmaßnahmen" handelt, aber ich habe nie konkrete Beweise gefunden. Die von mir verwendete Problemumgehung besteht darin, zu erkennen, wenn der neue Typ file ist, und in diesem speziellen Fall ein neues input -Element zu erstellen, seinen Typ auf Datei festzulegen, seine ID festzulegen und die vorhandene Eingabe durch die neue zu ersetzen .

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'); 
    } 
}); 

Sie können es in this fiddle überprüfen.