Что вы используете для поддержки атрибутов placeholder в браузерах?
В настоящее время я использую:
https://github.com/mathiasbynens/Placeholder-jQuery-Plugin
Также попробовал этот плагин безрезультатно:
https://github.com/danbentley/placeholder
Но он, похоже, не работает с IE... В частности, IE 8. Любые другие предложения/альтернативы?
Должен ли я забыть о атрибуте placeholder?
Вы правы, что IE8 не поддерживает атрибут placeholder. placeholder является частью спецификации HTML5, и IE8 был выпущен задолго до того, как думал HTML5.
Лучший способ справиться с этим в бесшовной манере - использовать инструмент, например Modernizr, чтобы определить, поддерживает ли браузер заполнитель и запустить JS polyfill script, если он не поддерживается.
if(!Modernizr.input.placeholder) {
//insert placeholder polyfill script here.
}
Существует множество сценариев-заполнителей polyfill для загрузки. Выберите тот, который использует атрибут placeholder, так что вам нужно всего лишь определить строку-заполнитель в одном месте для всех браузеров. Здесь вы можете попробовать: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
Надеюсь, что это поможет.
Здесь код прямо из моего проекта, который работает изначально в chrome и использует polyfill в IE8... там присутствует предупреждение для тестирования, которое показывает, когда вызывается polyfill.
Вам необходимо модернизировать загрузку как необходимое условие для использования этого кода, но простой script включить в ваш раздел <head> будет делать.
<script type="text/javascript">
$('document').ready(function () {
if (!Modernizr.input.placeholder) {
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur();
$('[placeholder]').parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
alert("no place holders");
}
});
</script>
Существует немало сценариев polyfill для атрибута placeholder. Здесь тот, который, кажется, хорошо работает.
Не забудьте вызвать $('input, textarea').placeholder(); в вашем JS-коде и, возможно, добавить правило CSS, например. .placeholder { color: #aaa }.
Со всеми другими ответами и примерами, которые я рассматривал, я нашел некоторые проблемы. Я написал собственное решение для решения этих проблем и решил опубликовать его здесь. 2 вещи, которые мой код будет обрабатывать правильно, что другие решения, похоже, имеют проблемы:
Включить Modernizr и JQuery следующим образом:
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="modernizr-2.6.2.js"></script>
Добавьте CSS, например:
<style type="text/css" media="all">
.placeholder {
color: #aaa;
}
</style>
Тогда нужен вам основной код:
<script type="text/javascript">
$(document).ready(function() {
// Only do anything if the browser does not support placeholders
if (!Modernizr.input.placeholder) {
// Format all elements with the placeholder attribute and insert it as a value
$('[placeholder]').each(function() {
if ($(this).val() == '') {
$(this).val($(this).attr('placeholder'));
$(this).addClass('placeholder');
}
$(this).focus(function() {
if ($(this).val() == $(this).attr('placeholder') && $(this).hasClass('placeholder')) {
$(this).val('');
$(this).removeClass('placeholder');
}
}).blur(function() {
if($(this).val() == '') {
$(this).val($(this).attr('placeholder'));
$(this).addClass('placeholder');
}
});
});
// Clean up any placeholders if the form gets submitted
$('[placeholder]').parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
if ($(this).val() == $(this).attr('placeholder') && $(this).hasClass('placeholder')) {
$(this).val('');
}
});
});
// Clean up any placeholders if the page is refreshed
window.onbeforeunload = function() {
$('[placeholder]').each(function() {
if ($(this).val() == $(this).attr('placeholder') && $(this).hasClass('placeholder')) {
$(this).val('');
}
});
};
}
});
</script>
Фактически ни один из IE с 19 октября 2011 года не поддерживает атрибут placeholder. Я тестировал его в 7, 8 и 9, и никто из них, похоже, не узнал его. Вы думаете, что ie9, видя, как он должен поддерживать css3 и html5, зафиксировал бы это, но он не выглядит так.
Как простой обходной путь, который не очень хорош, но выполняет задание, вы можете использовать некоторые javascript следующим образом:
<input type="text" value="Enter ZIP"
onfocus="if(this.value == 'Enter ZIP'){this.value = '';}" />
Это то, что я использовал в одном из моих проектов. Единственное, что мне нужно было только заполнить один элемент, так что это может не сработать для вашей ситуации сразу. Но просто чтобы понять, насколько прост в коде:
(function(){
var nameInput = document.getElementById('your-id-here');
var placeHolderSupport = ("placeholder" in document.createElement("input"));
if( !placeHolderSupport )
{
//show hint in gray
var placeholder = nameInput.getAttribute('placeholder');
nameInput.onfocus = function(){ if(this.value==placeholder){this.value='';this.className='';} };
nameInput.onblur = function(){ if(this.value==''){this.value=placeholder;this.className='placeholder';} };
nameInput.onblur();
}
})()
Я сам боролся с этим. Я нашел работу. Он работает очень хорошо в моем IE8 и в хром. Я разработал крутую работу и объяснил ниже...
HTML
<input type="text" class="input-remover badinput" value="Business Name">
<input type="text" class="input-remover badinput" value="Business Address 1">
<input type="text" class="input-remover badinput" value="Business Address 2">
<input type="text" class="input-remover badinput" value="City">
Все поля ввода с устройством ввода-вывода класса будут затронуты. Просто поставьте слова, которые вы хотите использовать в качестве держателя места внутри значения. Класс badinput используется, чтобы вы могли запретить кому-либо отправлять поля ввода со значениями по умолчанию.
JQuery
var textval
$(".input-remover").click(function(){
textval = this.value;
$(this).addClass("currentspot");
if ($(this).hasClass("placeholder"))
{
}else{
$(this).val("");
}
});
$("input").keypress(function(){
$(".currentspot").removeClass("badinput");
$(".currentspot").addClass("placeholder");
});
$("input").blur(function(){
if ($(this).hasClass("placeholder"))
{
$(".currentspot").removeClass("currentspot");
}else{
$(".currentspot").val(textval);
$(".currentspot").removeClass("currentspot");
}
});
Честно говоря, я объясню эту часть, но я действительно думаю, что было бы легче сказать, не редактируйте ее. ITs хорошо, как есть. Да, вы, вероятно, могли бы изменить его, но я бы избежал его, если вы не знаете, что делаете, чтобы он не начал действовать.
И я также включил JsFiddle, показывая, что он работает. Я надеюсь, что это помогает. Я рассматриваю большинство из этих вещей, которые мне нравятся, чтобы быть буровой установкой. но, по крайней мере, это происходит с тех пор. Удачи!
Fiddle Here