Я создаю мобильную версию своего сайта, на которой есть средство загрузки файлов, доступ к которому осуществляется через кнопку "Загрузить"
Я хотел бы скрыть кнопку от пользователей iPhone, поскольку элемент управления просто отображается серым цветом - возможно ли это?
Я действительно не хочу обнаруживать iPhone; Я чувствую, что было бы намного лучше обнаружить эту функцию - заставить ее автоматически работать, если Apple включит это (или телефон Jailbroken или что-то еще...)
Функция для проверки реализации input[type=file]:
function isInputTypeFileImplemented() {
var elem = document.createElement("input");
elem.type = "file";
if (elem.disabled) return false;
try {
elem.value = "Test"; // Throws error if type=file is implemented
return elem.value != "Test";
} catch(e) {
return elem.type == "file";
}
}
Fiddle: http://jsfiddle.net/8EqEE/9
UPDATE: теперь это часть Modernizr.
Существует запрос pull для modernizr, который, похоже, работает. По сути, он просто проверяет:
var elem = document.createElement('input');
elem.type = 'file';
return !elem.disabled;
Создайте <input type="file"> и проверьте, не отключено ли оно.
function isFileUploadImpossible() {
var el = document.createElement("input");
el.setAttribute("type", "file");
return el.disabled;
}
Протестировано в iOS 4.2.1, Android 2.3.4, Chrome 17, Firefox 11, IE7.
Обратите внимание, что я не тестировал это, поэтому я не уверен, что это сработает. Это в основном то, как вы тестируете поддержку типов ввода HTML5 (например, <input type="color" />). Но вы можете попробовать:
function upload_supported() {
var file_input = document.createElement("input");
file_input.setAttribute("type", "file");
return file_input.type !== "text";
}
Это зависит от поведения браузера при сбросе атрибута type на text, когда он встречает неизвестный тип ввода. Однако, поскольку вы говорите, что оно кажется серым, это будет означать, что оно не неизвестно, как таковое.
Гибрид проверки ошибок на основе значений (try/catch) плюс проверка на наличие отключений, похоже, дает хорошее покрытие для всех тестируемых ПК и мобильных браузеров.
alert((function isInputTypeFileImplemented(){
var elem;
try {
elem = document.createElement("input");
elem.type = "file";
} catch(e) {
return -1; // type=file is not implemented
}
try {
elem.value = "Test";
if (elem.value == "Test") {
return -2; // type=file should throw an error on line above
} else {
if (elem.disabled) {
return -3; // type=file disabled in iOS < 6
} else {
return true;
}
}
} catch(e){
return true; // type=file implemented correctly
}
})())
ПРИМЕЧАНИЕ. Вы можете изменить логический порядок, если вы предпочитаете другой поток.
Fiddle: http://jsfiddle.net/BRk5J/
Обновление до решения Rob W выше, которое поддерживает бета-версию iOS 5 + iOS 6. (Вызывать исключение не то, что я бы рекомендовал, но это работает):
function isInputTypeFileImplemented(){
var elem = document.createElement("input");
elem.type = "file";
try {
elem.value = "Test"; //If type=file is implemented, this would throw an
if (elem.disabled) {
return false;
} else {
return true;
}
} catch(e){
return false;
}
}
Я тоже искал решение этой проблемы. Это не так просто, как предлагаемые здесь решения. Некоторые из браузеров утверждают, что поддерживают определенные типы, но некоторые из этих типов были отключены из-за неполноты. Итак, что происходит, когда вы возвращаете InputElement.type, он может возвращаться как "файл" или "tel" или "number", но он по-прежнему обрабатывается браузером как "текст". К сожалению, я не думаю, что вы может сделать это atm, если вы не можете поговорить с разработчиками браузера о его исправлении, чтобы отключенные типы возвращались как текст.
в качестве добавленного примечания IE возвращает все неподдерживаемые типы в виде текста. Я тестировал это и с последними версиями Chrome и FF. Chrome "лежит" о поддержке номеров, типов телефонов, которые я знаю до сих пор, и FF также возвращает tel, когда он не поддерживается. Я уверен, что это происходит и с другими типами.