html文本框提示效果的示例代码
html文本框提示效果的示例代码
发布时间:2016-12-30 来源:查字典编辑
摘要:完整代码如下:复制代码代码如下:html文本框提示效果*{margin:0px;padding:0px;font-size:12px;}in...

完整代码如下:

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>html文本框提示效果</title>

<style type="text/css">

*{

margin:0px;padding:0px;font-size:12px;

}

input{

width:100px;height:20px;border:1px solid #ccc;

}

</style>

</head>

<body>

<script language="javascript">

function tips(id,str){

var l=document.getElementById(id).offsetLeft+120;

var t=document.getElementById(id).offsetTop;

document.getElementById("tips").innerHTML="提示:"+str;

document.getElementById("tips").style.left=l+"px";

document.getElementById("tips").style.top=t+"px";

document.getElementById("tips").style.display="";

}

function outtips(){

document.getElementById("tips").style.display='none';

}

</script>

<div id="tips"></div>

<br />

姓名:<input type="text" id="username" onfocus="tips('username','姓名长度最多16个字符')" onblur="outtips()" />

<br />

密码:<input type="password" id="password" onfocus="tips('password','密码长度必须在3-18位之间')" onblur="outtips()" />

</body>

</html>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类