HTML5/jQuery - Скрыть содержимое в старых браузерах?

Question

Мой вопрос на самом деле обратный, но вы получаете идею.

У меня есть форма с заполнителями и надписями над полями ввода. Это выглядит глупо, но поскольку старые браузеры не поддерживают HTML5, где добавлен атрибут «placeholder», метки нужны.

Я думал, что если будет способ проверить, поддерживает ли браузер HTML5? Если это так, скройте ярлыки. Если это не так, спрячьте заполнители (ну вам это не нужно, потому что браузер все равно не обнаружит заполнители).

<div class="6u"> 
Email 
<input type="email" class="text" name="email" placeholder="Email" /> 
</div> 

Я думаю, это возможно с помощью jQuery, но я действительно новичок в этом. Возможно ли это?

Answer 1

если вы хотите добавить идентификатор атрибута во входном тексте

<div class="6u"> 
Email 
<input id="email" type="email" class="text" name="email" placeholder="Email" /> 
</div> 

и использовать removeAttr() функция

$("#email").removeAttr("placeholder"); 

Answer 2

Я хотел бы сделать проверку значения, описанные здесь diveintohtml5. И затем, если браузер поддерживает HTML5, добавьте класс в тег body, чтобы скрыть все метки. Пусть браузер выполнит работу, а не ваш JavaScript.

Answer 3

вы можете проверить, поддерживает ли браузер для любого из HTML5 функций, таких как холст или локального хранения следующим образом: - см http://diveintohtml5.info/detect.html

function supports_local_storage() { 
    try { 
    return 'localStorage' in window && window['localStorage'] !== null; 
    } catch(e){ 
    return false; 
    } 
} 

Answer 4

Вы можете попробовать функцию обнаружения

<div class="6u"> 
    <label>Email</label> 
    <input type="email" class="text" name="email" placeholder="Email" /> 
</div> 

затем

.placeholder label{ 
    display: none; 
} 

и

(function() { 
    if ('placeholder' in document.createElement('input')) { 
     var html = document.getElementsByTagName("html")[0]; 
     html.className = (html.className || '') + ' placeholder' 
    } 
})(); 

Демо: Fiddle