JS-在Safari中无法将输入类型更改为FILE [英] JS - Can't change the input type to FILE in Safari

问题描述

由于未知原因，Safari无法将输入类型动态更改为 file .

首先:为什么会这样?

然后，在Safari中是否有任何工作方法可以动态地将输入类型更改为 file ?

解决方案

我仅在Safari和旧版本的IE上看到此问题.关于原因，我从未发现任何有关此事的记录.

有一次，jQuery本身禁用了 input 的 type 属性上的更改，因为它引起了IE中的问题.记录为:

 //我们不允许更改type属性(因为它会导致IE中的问题)if(name =="type"&& jQuery.nodeName(elem，"input")&& elem.parentNode)抛出类型属性无法更改"； 

您可以在此问题中找到有关此问题的更多信息.

如今，似乎已不再如此，但将类型更改为 file 时，Safari仍然无提示地失败.另一方面，从 file 更改它可以正常工作.由于未对此进行记录，因此我一直以为这是安全"措施，但我从未发现任何具体证据.

我正在使用的解决方法是检测新类型何时为 file ，在这种特殊情况下，创建一个新的 input 元素，并将其类型设置为file，设置其ID并将现有输入替换为新输入.

  var输入= $('#input');$('button [id ^ = type-]').on('click'，function(){var type = $(this).attr('id').replace('type-'，'');如果(类型==='文件'){var newElement = document.createElement('input');newElement.type =类型;newElement.id = input.attr('id');input.replaceWith(newElement);输入= $('#input');} 别的 {input.attr('type'，type);}$('#debug-info').html(尝试将输入类型更改为< strong>"+类型+'</strong>.< br>'+实际输入类型为< strong>"+ input.attr('type')+'< strong>'.);如果(type == input.attr('type')){$('#debug-info').css('color'，'green');} 别的 {$('#debug-info').css('color'，'red');}}); 

您可以在此小提琴中进行检查.

[JSFIDDLE]

The code works perfectly in every browser except Safari:

For unknown reason Safari can't dynamically change the input type to file.

First of all: why this happening?

And then, is there any workaroud to perform dynamically changing the input type to file in Safari?

解决方案

I've only seen this problem on Safari and old versions of IE. Regarding the reason, I've never found anything documented on this matter.

At one point, jQuery itself was disabling changes on the type attribute for an input because it was causing problems in IE. It was documented as:

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

You can find more informations regarding this issue in this question.

Nowadays, it seems to no longer be the case but Safari is still silently failing when changing the type to file. On the other hand, changing it from file works without any problem. Since this is not documented, I've always assumed it was for "security" measures but I've never found any concrete evidence.

The workaround I'm using is to detect when the new type will be file and in this special case, create a new input element, set its type to file, set its id and replace the existing input with the new one.

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

You can check it in this fiddle.

这篇关于JS-在Safari中无法将输入类型更改为FILE的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！