HTML 5 input placeholder 属性如何完美兼任ie
导读：收集整理的这篇文章主要介绍了HTML 5 input placeholder 属性如何完美兼任ie，觉得挺不错的，现在分享给大家，也给大家做个参考。 记得引用jquery 类库 复制代码代码如下: $(document .read...
收集整理的这篇文章主要介绍了HTML 5 input placeholder 属性如何完美兼任ie，觉得挺不错的，现在分享给大家，也给大家做个参考。 记得引用jquery 类库 复制代码代码如下:
$(document).ready(function () {
if ($.browser.msie)
$("input:text,input:password").each(function () {
VAR $placeholder = $(this).attr("placeholder");
var $width = $(this).css("width");
var $id = $(this).attr("id");
var $height = parseInt($(this).css("height")) + 6 + "px";
var $fontSize = $(this).css("font-size");
var $fontWeight = $(this).css("font-weight");
var $lineHeight = $height;
if ($(this).css("line-height") != "normal") {
$lineHeight = parseInt($(this).css("line-height")) + 6 + "px";
}
if ($placeholder != undefined) {
$(this).after("span class=\"placeholder ph_" + $id + "\" style=\"width:" + $width + "; line-height:" + $lineHeight + "; height:" + $height + "; font-weight:" + $fontWeight + "; margin-left:-" + $width + "; font-Size:" + $fontSize + "\"> " + $placeholder + "/span> ");
}
$(this).bind("keyup", function () {
if ($(this).val() == "") {
$(this).parent().find(".ph_" + $id).css("display", "inline-block");
}
else {
$(this).parent().find(".ph_" + $id).css("display", "none");
}
} );
} );
$(".placeholder").live("click", function () {
$(this).prev().focus();
} );
} );
页面调用
复制代码代码如下:
input id="n1" tyPE="text" placeholder="我是提示内容正常" />
input id="n2" type="text" placeholder="我是提示内容宽高" style="width:100px; height:100px; " />
input id="n3" type="text" placeholder="我是提示内容我有其他样式" / style="width:300px; height:40px; font-weight:bold; ">
input id="n4" type="text" placeholder="还可以尝试下其他的" />
样式
复制代码代码如下:
style type="text/css">
.placeholder { display:inline-block; color:gray; vertical-align:top; overflow:hidden; }
/style>
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： HTML 5 input placeholder 属性如何完美兼任ie
本文地址： https://pptw.com/jishu/585349.html