input自带的title提示效果很弱,用户不注意根本看不见文本框的提示,自己写了一个自定义消息提示的方法,有可能控件在框架里面,所以加了绝对位置获取的代码,如下:
function tips(id,str){
var obj = eval('document.form1.' + id);
var l=getAbsoluteLeft(obj)+getElementWidth(obj)-250;
var t=getAbsoluteTop(obj)-25;
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';
}
// 获取控件左绝对位置
function getAbsoluteLeft(obj) {
var oLeft = obj.offsetLeft;
while(obj.offsetParent!= null) {
var oParent = obj.offsetParent ;
oLeft += oParent.offsetLeft ;
obj = oParent ;
}
return oLeft;
}
// 获取控件上绝对位置
function getAbsoluteTop(obj) {
var oTop = obj.offsetTop;
while(obj.offsetParent!= null) {
var oParent = obj.offsetParent ;
oTop += oParent.offsetTop ;
obj = oParent ;
}
return oTop ;
}
// 获取控件宽度
function getElementWidth(obj) {
return obj.offsetWidth;
}
var obj = eval('document.form1.' + id);
var l=getAbsoluteLeft(obj)+getElementWidth(obj)-250;
var t=getAbsoluteTop(obj)-25;
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';
}
// 获取控件左绝对位置
function getAbsoluteLeft(obj) {
var oLeft = obj.offsetLeft;
while(obj.offsetParent!= null) {
var oParent = obj.offsetParent ;
oLeft += oParent.offsetLeft ;
obj = oParent ;
}
return oLeft;
}
// 获取控件上绝对位置
function getAbsoluteTop(obj) {
var oTop = obj.offsetTop;
while(obj.offsetParent!= null) {
var oParent = obj.offsetParent ;
oTop += oParent.offsetTop ;
obj = oParent ;
}
return oTop ;
}
// 获取控件宽度
function getElementWidth(obj) {
return obj.offsetWidth;
}
<
form
id
="form1"
name
="form1"
>
< 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 >
< textarea cols =60 rows =2 id =to name =to autocomplete ="off" onmouseover ="tips('to','这是提示内容')" onmouseout ="outtips()" ></ textarea >
</ form >
< 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 >
< textarea cols =60 rows =2 id =to name =to autocomplete ="off" onmouseover ="tips('to','这是提示内容')" onmouseout ="outtips()" ></ textarea >
</ form >