Я не уверен, почему мои заполнители не отображаются. Вот код.Входные заполнители не отображаются
<label>Input here:</label><span><input placeholder="Enter Epoch Time" type="number" id='my-id-is-here'></span>
<label>Input2 here:</label><span><input placeholder="10" type="number" id='my-id2-is-here'></span>
Когда я загружаю страницу, я не получаю никаких заполнителей только пустых входов.
Спасибо.
попробовать это решение:
jQuery(function() {
jQuery.support.placeholder = false;
p = document.createElement('form');
if('placeholder' in p) jQuery.support.placeholder = true;
});
$(function() {
if(!$.support.placeholder) {
var active = document.activeElement;
$('input[type="text"], textarea').focus(function() {
if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
$(this).val('').removeClass('hasPlaceholder');
}
}).blur(function() {
if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
$(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
}
});
$('input[type="text"], textarea').blur();
$(active).focus();
$('form:eq(0)').submit(function() {
$('input[type="text"].hasPlaceholder, textarea.hasPlaceholder').val('');
});
}
});
Имейте в виду, что этот скрипт использует jQuery для переопределения всех браузеров, а не только тех, которые не выполняют свою собственную обработку по умолчанию этого (Placeholder) HTML5 (например, меньше, чем Internet Explorer 10). –
Этот плагин JQuery должен сделать трюк ...
https://github.com/mathiasbynens/jquery-placeholder
Поддерживает до IE6
Вот твердое исправление с помощью Modernizr, Я проверял это на IE5:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Placeholder Fix</title>
</head>
<body>
<label>Input here:</label><span><input placeholder="Enter Epoch Time" type="number" id='my-id-is-here'></span>
<label>Input2 here:</label><span><input placeholder="10" type="number" id='my-id2-is-here'></span>
<style type="text/css">
.placeholder {
color: red;
font-weight: normal;
}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.1.js"></script>
<script>
if (!Modernizr.input.placeholder) {
alert('in')
$('[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('');
}
})
});
}
</script>
</body>
</html>
Текст-заполнитель загорается красным цветом при загрузке страницы в браузере, который не обрабатывает атрибуты HTML5, такие как placeholder, чтобы доказать, что Modernizr будет добавлять или обрабатывать атрибут HTML5 placeholder, если браузер не работает, вы может, очевидно, изменить текст от красного до стандартного #999 или любого цвета, который вы хотите.
Наслаждайтесь!
Кажется [работать] (http://jsfiddle.net/kY8dG/). В каком браузере вы тестируете? IE8? – Vucko
Ваш тег ввода написан как самозакрывающийся без передней косой черты в конце. Может не исправить проблему, но эта часть ошибочна. – ganders
Спасибо, я исправлю входной тег. –