占位符不显示
问题描述:
伙计们我已经阅读了关于该主题的所有内容,但我仍然无法弄清楚为什么我的占位符未显示。希望你能分享你的专业知识,并告诉我做错了什么。占位符不显示
<input type="text" name="search" class="input-block-level search-query" placeholder="Enter your name" required="">
这只是没有显示在任何浏览器。感谢提前!
答
我发现这个链接,它会给我们一个关于如何修复占位符问题的好主意,它会使用jquery,这将是一个很好的解决方案。 http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html 这里是全jQuery代码 //在MIT许可下发布:http://www.opensource.org/licenses/mit-license.php
$('[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().parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
答
您可以尝试使用此代码到你的占位符显示在此输入。
$(document).ready(function() {
function add() {if($(this).val() == ''){$(this).val($(this).attr('placeholder')).addClass('placeholder');}}
function remove() {if($(this).val() == $(this).attr('placeholder')){$(this).val('').removeClass('placeholder');}}
if (!('placeholder' in $('<input>')[0])) {
$('input[placeholder]').blur(add).focus(remove).each(add);
$('div').submit(function(){$(this).find('input[placeholder]').each(remove);});
}
});
<div>
<input type="text" name="search" class="input-block-level search-query" placeholder="Enter your name" required>
</div>
您使用的是什么浏览器?请记住,某些浏览器(如IE6-9,Opera 10.1和FF Terry