项目中表单输入检测是基本必定会碰到的,本文提供一种方法通过js动态创建层的方法为表单添加错误提示。该代码在IE6和firefox3.5中测试通过。
动态创建层的代码:
function createDiv(msg)
{
//create a new empty div
var str = document.createElement("div");
str.id = "newdiv"; //div ID
str.innerHTML=msg; // content
document.body.appendChild(str); // add it to document body
return str; // return the new div
}
通过调用上面函数基可以创建一个层:
var msg="X| 请输入数据!";
var newdiv = createDiv(msg); // msg 为层内内容
我们可以用css对创建的曾定义样式,可以采用id或者class的方式。下面通过直接指定id的方式:
<style type="text/css">
div#newdv{width:120px;height:16px;padding-top:2px;border:solid 1px red;position:absolute;background-color:red;color:#fff;font-size:12px;}
</style>
当我们提交表单时,就可以对各个表单进行检验了,当检验到某表单不合法,我们需要在该表单的位置给出错误提示。步骤是:先找出该表单的位置,然后以错误信息创建错误提示新层,将层的位置设置在该表单上。
function submit()
{
var item = document.getElementById("itemId"); // itemId is the wrong input item
var left=item.offsetLeft+(item.style.width.replace("px",""))/1; // get the item left position
var top=item.offsetTop; // get the item top position
// create new div:
var msg="X| 请输入数据!";
var newdiv = createDiv(msg);
// set the div position:
newdiv.style.left=left;
newdiv.style.top=top;
}
获取表单控件位置:item.offsetLeft, item.offsetTop;当表单嵌套在其他控件内时:
function getTop(e)
{
var offset=e.offsetTop;
if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
return offset;
}
function getLeft(e)
{
var offset=e.offsetLeft;
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
return offset;
}
事件的坐标:window.event.x, window.event.y。
动态给控件添加事件:
function addEnven()
{
var item = document.getElementById("itemId");
item.οnchange=function()
{
submit();
}
}
onload时调用:window.οnlοad=addEnven;
完整代码:
test.htm
<html<head>
< language="java">
function submit()
{
var item = document.getElementById("itemId"); // itemId is the wrong input item
var left=getLeft(item)+(item.style.width.replace("px",""))/1; // get the item left position
var top=getTop(item); // get the item top position
// create new div:
var msg="X| Please input number!";
var newdiv = createDiv(msg);
// set the div position:
newdiv.style.left=left;
newdiv.style.top=top;
}
function createDiv(msg)
{
//create a new empty div
var str = document.createElement("div");
str.id = "newdiv"; //div ID
str.innerHTML=msg; // content
document.body.appendChild(str); // add it to document body
return str; // return the new div
}
function getTop(e)
{
var offset=e.offsetTop;
if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
return offset;
}
function getLeft(e)
{
var offset=e.offsetLeft;
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
return offset;
}
</>
<style type="text/css">
div#newdiv{width:120px;height:16px;padding-top:2px;border:solid 1px red;position:absolute;background-color:red;color:#fff;font-size:12px;}
</style>
</head>
</body>
<br><br><br><br><br><br><br><br>
<table><tr><td width="400" align="center">
<input id="itemId" type="text" style="width:120px;height:20px;"><br>
<input type="button" value="call" οnclick="submit()">
</td></tr></table>
</body>
</html>
利用动态创建层技术实现无冗余代码为表单自动添加错误提示
最新推荐文章于 2021-12-10 15:29:45 发布