Как я могу получить заполнитель текста в Firefox и других браузерах, которые не поддерживают параметр тега html5?
Это работает в Chrome и любом другом браузере, который поддерживает заполнитель текста в HTML5
<input id="name" name="name" type="text" placeholder="Please enter your name..." required /> <br />
Но он не работает в 3.5 и ранее Firefox, и, конечно, IE8 и, возможно, другие браузеры.
Как мне добиться того же (предпочтительно в HTML / CSS - если не я открыт для предложений), чтобы поддерживать все старые браузеры? Если не каждый браузер, то, по крайней мере, Firefox и IE.
Safari и Chrome уже поддерживают его (или в любом случае последние версии).
Спасибо.
3 ответа
Кстати ... если кому интересно ...Я нашел красивое элегантное решение - плагин jQuery, который SOOO хорош.
Это буквально одна строка jQuery, миниатюрного js-плагина, вместе с простым именем класса на входе.
http://labs.thesedays.com/projects/jquery/clearfield/
Это самое прекрасное, что я обнаружил, рядом с «Заполнителем» в html.
Когда-нибудь я смогу правильно задокументировать это, но взгляну на этот пример: http://dorward.me.uk/tmp/label-work/example.html
Короче - поместите Затем используйте JS, чтобы определить, должна ли метка быть видимой или нет, основываясь на фокусировке. Применяйте разные стили, когда JS недоступен, чтобы вместо этого расположить метку рядом с элементом. В отличие от использования значения под прозрачным с использованием , это не делает контент недоступным для устройств, которые отображают только сфокусированный контент (например, программы чтения с экрана), а также работает для ввода пароля тип.
Я использую следующий фрагмент, который я написал с помощью jQuery. Просто добавьте класс автоочистки текстового поля в любое текстовое поле на странице, и все будет в порядке.
<input type="text" value="Please enter your name" class="textbox-auto-clear" />
$(".textbox-auto-clear").each(function(){
var origValue = $(this).val(); // Store the original value
$(this).focus(function(){
if($(this).val() == origValue) {
$(this).val('');
}
});
$(this).blur(function(){
if($(this).val() == '') {
$(this).val(origValue);
}
});
});
Я предполагаю, что вы хотите продолжать использовать атрибут placeholder для браузеров HTML5, и в этом случае вам нужно будет выполнить некоторое обнаружение браузера и применить решение jQuery только к браузерам, которые его не поддерживают.
Еще лучше, вы можете использовать библиотеку Modernizer , как указано в этом ответе. Обнаружение поддержки определенных функций HTML 5 через jQuery