记得引用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>
本文地址:https://www.stayed.cn/item/15022
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我