Обнаружение поддержки определенных функций HTML 5 с помощью jQuery - PullRequest
Новая
       27

Обнаружение поддержки определенных функций HTML 5 с помощью jQuery

11 голосов
/ 01 ноября 2009

Я работаю над демо-кодом HTML5, включая такие, как <input type="date" />

В настоящее время это работает правильно в Opera 10 как есть, но любой другой браузер просто отображает обычный текстовый ввод. Затем я использую плагин jQuery.date-input для переопределения этого поведения в браузерах, которые его не поддерживают.

Проблема в том, что jQuery работает и в Opera, поэтому в Opera я получаю два календаря для выбора даты (один из браузера, один из jQuery)

Сейчас я могу обойти это, используя if (window.opera) - но есть ли способ, скажем, jQuery.support, чтобы я мог достоверно определить, поддерживает ли текущий браузер определенную функцию HTML5 или нет?

Ответы [ 2 ]

17 голосов
/ 01 ноября 2009

Я бы посмотрел на Modernizr . Это библиотека Javascript с открытым исходным кодом, лицензированная MIT, которая обнаруживает поддержку многих функций HTML5 / CSS3, и она ДЕЙСТВИТЕЛЬНО крошечная (сжатая 7 КБ). Чтобы использовать это, просто: 

<script src="modernizr.min.js"></script>

В пределах <head> вашего документа. После этого у него есть множество функций для проверки того, что вам нужно. Пример: 

if (Modernizr.canvas) { 
     // do stuff
}

Есть еще много способов проверить, какая именно HTML5 / CSS3 функция вам нужна. Зайдите на их сайт , чтобы получить его и посмотреть документы.

11 голосов
/ 01 ноября 2009

Да, проверять конкретный браузер совсем не то, что вам нужно. Иногда полезно обнаружить, когда вам нужно применить обходные пути к ошибкам браузера (обычно с IE), но если вы хотите узнать, поддерживает ли браузер функцию, просто отыщите ее.

Некоторые вещи легче понюхать, чем другие. Для вашего примера поддержки ввода даты это очень просто. Свойство input.type сообщает вам, какой тип управления браузер считает; если ввод даты не поддерживается, вы получите 'text'. 

<input type="date" class="dateinput" />

if ($('.dateinput')[0].type!=='date') {
     $('.dateinput').addSomeDateScriptingPluginThing();
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...