文本框提示信息解决办法
日期：2014-05-16 浏览次数：20404 次
文本框提示信息
<!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> </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 " style= "position:absolute;border:1px solid #ccc;padding:0px 3px;color:#f00;display:none;height:20px;line-height:20px;background:#fcfcfc "> </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>
为什么我把用户名，密码放到表格里，提示信息就显示在上面了，而不是在文本框后面出来提示信息呢
------解决方案--------------------
<!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> </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 calculateSumOffset(item, offsetName) {
var totalOffset = 0;
do {
totalOffset += eval( 'item. '+offsetName);
item = eval( 'item.offsetParent ');
} while (item != null);
return totalOffset;
}
function tips(str){
var obj = event.srcElement;
var l = calculateSumOffset(obj, "offsetLeft ") + obj.offsetWidth;
var t= calculateSumOffset(obj, "offsetTop ");
document.getElementById( "tips ").innerHTML= "提示： "+str;
document.getElementById( "tips ").style.left=l;
document.getElementById( "tips ").style.top=t;
document.getElementById( "tips ").style.display= " ";
}
function outtips(){
document.getElementById( "tips ").style.display= 'none ';
}
</script>
<div
<!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> </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 " style= "position:absolute;border:1px solid #ccc;padding:0px 3px;color:#f00;display:none;height:20px;line-height:20px;background:#fcfcfc "> </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>
为什么我把用户名，密码放到表格里，提示信息就显示在上面了，而不是在文本框后面出来提示信息呢
------解决方案--------------------
<!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> </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 calculateSumOffset(item, offsetName) {
var totalOffset = 0;
do {
totalOffset += eval( 'item. '+offsetName);
item = eval( 'item.offsetParent ');
} while (item != null);
return totalOffset;
}
function tips(str){
var obj = event.srcElement;
var l = calculateSumOffset(obj, "offsetLeft ") + obj.offsetWidth;
var t= calculateSumOffset(obj, "offsetTop ");
document.getElementById( "tips ").innerHTML= "提示： "+str;
document.getElementById( "tips ").style.left=l;
document.getElementById( "tips ").style.top=t;
document.getElementById( "tips ").style.display= " ";
}
function outtips(){
document.getElementById( "tips ").style.display= 'none ';
}
</script>
<div
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
