占位符和IE！= BFFs（占位符和IE9不工作）
所以，我试图让占位符属性在IE9及更低版本中工作。 但是，我收到了奇怪的行为（请参阅下面的截图）。
我发现这个网站，并决定使用下面的JS代码：
JS：
// Checks browser support for the placeholder attribute
jQuery(function() {
jQuery.support.placeholder = false;
test = document.createElement('input');
if('placeholder' in test) jQuery.support.placeholder = true;
});
// Placeholder for IE
$(function () {
if(!$.support.placeholder) {
var active = document.activeElement;
$(':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');
}
});
$(':text, textarea').blur();
$(active).focus();
$('form').submit(function () {
$(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
});
}
});
HTML：
<p>
<label>To: </label>
<input type="text" id="toEmail" placeholder="Recipient's Email Address" />
</p>
<p>
<label>From:</label>
<input type="text" id="fromName" placeholder="Your Name" />
</p>
<p>
<label>From: </label>
<input type="text" id="fromEmail" placeholder="Your Email Address" />
</p>
<p>
<label>Message:</label>
<textarea rows="5" cols="5" id="messageEmail"></textarea>
</p>
CSS：
.hasPlaceholder {
color: #999;
}
我的网站打开了一个表单的模式。 但是，第一次打开模式时，没有任何占位符文本出现：
但是，如果我点击文本字段，然后点击文本字段，占位符文本就会显示出来。
我希望文字在模式打开后立即显示出来。 这都是真的......
仅供参考 -我怀疑文本最初可能不会出现，因为我的模态最初是隐藏的。 如果情况确实如此，我该如何解决？
注：我知道这些插件存在。 我不想使用插件。
改变你的jquery到这个：
; (function ($) {
$.fn.placehold = function (placeholderClassName) {
var placeholderClassName = placeholderClassName || "placeholder",
supported = $.fn.placehold.is_supported();
function toggle() {
for (i = 0; i < arguments.length; i++) {
arguments[i].toggle();
}
}
return supported ? this : this.each(function () {
var $elem = $(this),
placeholder_attr = $elem.attr("placeholder");
if (placeholder_attr) {
if ($elem.val() === "" || $elem.val() == placeholder_attr) {
$elem.addClass(placeholderClassName).val(placeholder_attr);
}
if ($elem.is(":password")) {
var $pwd_shiv = $("<input />", {
"class": $elem.attr("class") + " " + placeholderClassName,
"value": placeholder_attr
});
$pwd_shiv.bind("focus.placehold", function () {
toggle($elem, $pwd_shiv);
$elem.focus();
});
$elem.bind("blur.placehold", function () {
if ($elem.val() === "") {
toggle($elem, $pwd_shiv);
}
});
$elem.hide().after($pwd_shiv);
}
$elem.bind({
"focus.placehold": function () {
if ($elem.val() == placeholder_attr) {
$elem.removeClass(placeholderClassName).val("");
}
},
"blur.placehold": function () {
if ($elem.val() === "") {
$elem.addClass(placeholderClassName).val(placeholder_attr);
}
}
});
$elem.closest("form").bind("submit.placehold", function () {
if ($elem.val() == placeholder_attr) {
$elem.val("");
}
return true;
});
}
});
};
$.fn.placehold.is_supported = function () {
return "placeholder" in document.createElement("input");
};
})(jQuery);
然后使该功能起作用：
$("input, textarea").placehold("something-temporary");
事实证明，我的问题与代码本身完全无关，但是与代码的位置有关。
我将JS代码直接放到index.html文件中，当我将它放在不同的emailmodal.js文件中时。
我认为问题在于模态最初是隐藏的，因此，当JS运行时，这些文本字段还不存在。 直到我打开模态并单击文本字段，这些字段突然“存在”。
如果我错了，你们可以纠正我，但我的问题现在已经解决了。
链接地址: http://www.djcxy.com/p/70575.html上一篇: Placeholder and IE != BFFs (Placeholder and IE9 not working)