Comments 27
Судя по поддержке, таки 10 ИЕ вполне себе браузер :)

Не понял полезности «Кастомное контекстное меню» нет вещь конечно хорошая, но поддержка only firefox, да ещё и хромающая… хотя надеюсь это лишь временно.
UFO landed and left these words here
<input name="frameworks" list="frameworks" />

<datalist id="frameworks">
    <option value="MooTools">
    <option value="Moobile">
    <option value="Dojo Toolkit">
    <option value="jQuery">
    <option value="YUI">
</datalist>
А вот я бы опасался иметь два таких элемента, у которых id одного идентичен name другого…
UFO landed and left these words here
С какой проблемой? Чёртово НЛО скрывает самое интересное)))
Та практически для всего есть классные аналоги. Особо убого выглядят стандартные поля для ввода даты. Уж лучше прикрутить JS календарик, который и в дизайн будет нормально вписываться, и выглядеть везде одинаково будет.
Произвольный вид во всех браузерах — это замечательно. А вот поддержка загрузки нескольких файлов, да ещё и по частям — с этим уже проблема (в нативном исполнение конечно же).
А, об этом. Согласен, упарило напрочь крайне раздражает. Нативная поддержка всеми браузерами мультиаплоада была бы крайне кстати.
Вы не поверите, но таких аналогов куча. Но это не совсем аналоги, так как из подобных плагинов и взята идея автодополнения. А datalist это реализация на чистом HTML.
Асолютно согласен. Я просто поделился решением, которое визуально работает очень схоже, при этом уже сейчас во всех браузерах (IE7+). Да ещё и более кастомизируемое. А то что datalist — это нативный HTML, а Bootstarp Typeahead — нет, это я понимаю.
Про <audio> стоит заметить, что mp3 не поддерживается в FF и Опере (то есть приведенный в посте код не соответствует табличке соответствия). И ни один формат не поддерживается сразу во всех популярных браузерах (табличка). Так что либо backoff на Flash в FF (при использовании mp3), либо конвертация аудио в пару форматов.
Если какая то фича не поддерживается во ВСЕХ браузерах, включая распространенные старые Internet Explorer-ы, то для большинства проектов, применять ее нельзя. А судя по красным ячейкам в приведенных табличках, большинство этих функций бесполезны :-(

Было бы интересно узнать, не какие из фич теоретически существуют, а какие реально одинаково работают во всех распространенных бреузерах, и какие могут эмулироваться библиотеками типа modernizer.
Многие фичи в html5 опциональны (и специально так спроектированы) — пользователи новых браузеров получат большее удобство, пользователи старых не потеряют возможность пользоваться даже без особых стараний фронтендера. Скажем input с type=«email/url» и required станет простым input (text по дефолту), а валидировать на сервере все равно нужно, поэтому на отдельную клиентскую валидацию можно забить — старые получат ошибку от сервера, новые от браузера, а на ошибки от JS можно забить
И после этого я получаю от заказчика следующее:
— Клиентская валидация под браузером А вообще не работает!
— Инвалидное поле под браузером В выглядит не так, как под браузером С!
— Исправляйте эти баги, и учитесь писать кроссбраузерный код!


Обидно!

Так что, пока эти фичи не поддерживаются везде и одинаково, я буду реализовывать такой функционал вручную. Что касается той же валидации, то это не отнимает много сил. Добавляем пользовательские атрибуты, типа
<input type="text" data-validator="email" data-invalid-message="Некорректный email" data-required="yes" />
А потом пишем буквально несколько строчек на jQuery, которые при сабмите любой формы ищут эти атрибуты и делают проверку. Будет работать везде, одинаково, и я не получу упрек в низком профессионализме и неумении поддерживать все браузеры.
Обидно, конечно. Но такие вопросы нужно согласовывать с заказчиком до разработки: список поддерживаемых браузеров и степень их поддержки.

Это плагин какой-то? У знакомых немного другой синтаксис. А чисто на JS не уложиться, по-моему, в несколько строк.
При согласовании список поддерживаемых браузеров звучит как «Все распространенные на данный момент браузеры».

Я имел ввиду, если самому реализовывать. В простейшем случае можно написать что то типа того:
// При сабмите любой формы
$('form').submit(function(){ 
    var valid = true;
    // Пробежаться по всем полям
    $('input', this).each(function(){ 
        $(this).removeClass('invalid'); 
        // Если есть специальный аттрибут, то проверить условие
        if($(this).attr('data-requered') == 'yes' && (this).val() == '') {
            // Помечаем поле как инвалидное, может быть еще alert-ом ругаемся
            $(this).addClass('invalid'); 
            ...
            valid = false;            
        }        
        // Другие валидаторы, например через RegExp, минимальная длинна, пользовательская функция, совпадение с другим полем (для паролей) и т.п.
        if(...) {
        ...
        }
    });    
    return vaild;
});

Но уверен что есть куча готовых плагинов, включая такие, которые эмулируют неработающие фичи HTML5 в текущем брузере.
Datalist очень разочаровал отсутствием каких-либо особенных для этого элемента методов. Например, о динамическом автозаполнении (jQuery.ui.autocomplete или Bootstrap jQuery.typeahead) при помощи аякса можно забыть.
Only those users with full accounts are able to leave comments. Log in, please.