文本框默认输入灰色显示，点击后用层显示提示信息

最新推荐文章于 2021-01-28 21:20:46 发布

iteye_8663

最新推荐文章于 2021-01-28 21:20:46 发布

阅读量341

点赞数

分类专栏：知识点积累文章标签：开发工具 javascript java ViewUI

知识点积累专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<style>
/*姓名格式提示信息*/
#passengerNameDiv,
.passengerNameDiv{
position:absolute;
display:none;
}
#passengerNameIframe,
.passengerNameIframe{
position:absolute;
width:168px;
height:48px;
}
#passengerNameNoticeDiv,
.passengerNameNoticeDiv{
position:absolute;
width:168px;
padding:2px 2px;
border:1px solid #7F9DB9;
background:#FFFFFF;
z-index:2;
}
#passengerNameNoticeDiv ul,
.passengerNameNoticeDiv ul{
clear:both;
margin:0pt;
padding:0pt;
}
#passengerNameNoticeDiv ul li,
.passengerNameNoticeDiv ul li{
margin:0pt;
padding:0pt;
float:left;
width:100%;
text-align:left;
font-size:12px;
color:#C0C0C0;
line-height:20px;
}
</style>
</head>
<script language="javascript" type="text/javascript">

function focusPassengerName(textObj){
var textDefault = '所选证件姓名';
if (textObj.value == textDefault){
textObj.value = '';
}
textObj.style.color="black";
var posi = getPositionByObj(textObj);
showHotAirCitys(posi.left,posi.top);
}

function blurPassengerName(textObj){
var textDefault = '所选证件姓名';
if (textObj.value == ''){
textObj.value = textDefault;
textObj.style.color="gray";
}else if(textObj.value == textDefault){
textObj.style.color="gray";
}else{
textObj.style.color="black";
}
hideHotAirCitys();
}
function showHotAirCitys(left,top){
document.getElementById("passengerNameDiv").style.left = left+'px' ;
document.getElementById("passengerNameDiv").style.top = top+'px' ;
document.getElementById("passengerNameDiv").style.display= "block";
}
function hideHotAirCitys(){
document.getElementById("passengerNameDiv").style.display= "none";
}
function getPositionByObj(e){
var t = e.offsetTop;
var l = e.offsetLeft;
var w = e.offsetWidth;
var h = e.offsetHeight;
while(e=e.offsetParent){
t += e.offsetTop;
l += e.offsetLeft;
}
t += h;
return {top: t,left: l,width: w,height: h}
}

</script>
<body>
<input type="text" name="eeeee" /><br>
<input type="text" name="eeeee" /><input type="text" id="test" οnfοcus="focusPassengerName(this)" οnblur="blurPassengerName(this)" value="所选证件姓名" style="color:gray;" /><br/><br/><br/>


<div id="passengerNameDiv" class="passengerNameDiv">
<IFRAME id="passengerNameIframe" class="passengerNameIframe"></IFRAME>
<div id="passengerNameNoticeDiv" class="passengerNameNoticeDiv">
<ul>
<li>中文姓名中文字符</li>
<li>英文姓名 last/frist middle</li>
</ul>
</div>
</div>
</body>
</html>