JSP :将 DIV 定位在特定坐标不起作用

Question

我正在尝试将 Div 定位在输入框的坐标上。单击输入框时，DIV 已启用并加载值，DIV 上的任何选择都必须将值设置为输入框。一切都工作正常，除了输入框没有定位在坐标上，而是位于页面顶部。

<div class="mRow">
<label for="SS">Special Subjects:</label>
<span class="numLbls">1. </span><input type="text" name="ade" value="<%=ade[0]%>" size="6" maxlength="6" onclick="showCodeLookup(this, 'divSpec')"/>
<span class="numLbls">2. </span><input type="text" name="ade" value="<%=ade[1]%>" size="6" maxlength="6" onclick="showCodeLookup(this, 'divSpec')"/>
<span class="numLbls">3. </span><input type="text" name="ade" value="<%=ade[2]%>" size="6" maxlength="6" onclick="showCodeLookup(this, 'divSpec')"/>
</div>

divSpec 是：

<div id="divSpec" class="lookupTable" onClick="hideThis(this.id)">
<table>
<%
for (int i = 0; i < luSpec.size(); i++)
{
lu = (LookupTableBean) luSpec.get(i);
%>
<tr>
<td><%=lu.getCode()%>.</td>
<td><a href="javascript: setCode('divSpec', '<%=lu.getCode()%>')" ><%=lu.getDescr()%></a></td>
</tr>
<%
}%>
</table>
</div>

用于查找的 CSS 是：

.lookupTable
{
display:none;
padding:5px;
z-index:10;
font-size: 10px; 
position: absolute;
border: 2px solid #933; 
background-color:white; 
width: 220px; 
height:180px; 
overflow:auto;
}

爪哇语

// Detect if the browser is IE or not.
// If it is not IE, we assume that the browser is NS.
var IE = document.all?true:false
var codeEl;
// If NS -- that is, !IE -- then set up for mouse capture
if (!IE) document.captureEvents(Event.MOUSEMOVE)
// Set-up to use getMouseXY function onMouseMove
document.onmousemove = getMouseXY;
// Temporary variables to hold mouse x-y pos.s
var tempX = 0;
var tempY = 0;
//var frm = document.dashboardSearchForm;
function getMouseXY(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft
tempY = event.clientY + document.body.scrollTop
} else {  // grab the x-y pos.s if browser is NS
tempX = e.pageX
tempY = e.pageY
}  
// catch possible negative values in NS4
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}  
// show the position values in the form named Show
// in the text fields named MouseX and MouseY
//document.Show.MouseX.value = tempX
//document.Show.MouseY.value = tempY
return true
}
function showCodeLookup(el, divName)
{
//Hide any lookup tables that are displayed first
document.getElementById("divSpec").style.display="none";
var divCodes = document.getElementById(divName);
computeCoordinates();
codeEl = el;
alert(" Iam here");
alert("document.Show.sMouseY.value:"+document.Show.sMouseY.value);  
alert("document.Show.sMouseX.value:"+document.Show.sMouseX.value);
divCodes.style.display="block";
divCodes.style.top=document.Show.sMouseY.value;
divCodes.style.left=document.Show.sMouseX.value;
}
function setCode(divName, code)
{
var divEl = document.getElementById(divName);
codeEl.value = code;
divEl.style.display="none";
}
function computeCoordinates()
{
var isIE = document.all ? true : false;  
var ScrollTop = document.body.scrollTop;
var _x = tempX;
var _y = tempY;
if (ScrollTop == 0)
{
if (window.pageYOffset)
ScrollTop = window.pageYOffset;
else
ScrollTop = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
}
if (isIE) 
{
_x = tempX + document.body.scrollLeft;
_y = tempY + ScrollTop;
}  

document.Show.sMouseX.value = _x;
document.Show.sMouseY.value = _y;
}
function hideThis(id)
{
document.getElementById(id).style.display="none";
}

请提出任何建议。我添加了警报 showCodeLookup((，它为我提供了正确的坐标，例如 Y 为 1036，X 为 536。

Answer 1

我已经在Chrome上测试了您的代码，发现在您的js代码中，document.Show.sMouseY.value和document.Show.sMouseX.value为空或未定义。因此，当您将这些值分配给divdivSpec时，它不会将其定位到所需的坐标。相反，我在您的js代码中进行了某些更改，如下所示：

var IE = document.all ? true : false
var codeEl;
// If NS -- that is, !IE -- then set up for mouse capture
if (!IE) document.captureEvents(Event.MOUSEMOVE)
// Set-up to use getMouseXY function onMouseMove
document.onmousemove = getMouseXY;
// Temporary variables to hold mouse x-y pos.s
var tempX = 0;//declare 
var tempY = 0;//declare
var mouseX = 0;
var mouseY = 0;
//var frm = document.dashboardSearchForm;
function getMouseXY(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft
tempY = event.clientY + document.body.scrollTop
} else { // grab the x-y pos.s if browser is NS
tempX = e.pageX
tempY = e.pageY
}
// catch possible negative values in NS4
if (tempX < 0) {
tempX = 0
}
if (tempY < 0) {
tempY = 0
}
return true;
}
function showCodeLookup(el, divName) {
//Hide any lookup tables that are displayed first
document.getElementById("divSpec").style.display = "none";
var divCodes = document.getElementById(divName);
codeEl = el;
computeCoordinates();
divCodes.style.display = "block";
divCodes.style.left = tempX; //(change here)assigning coordinate found
divCodes.style.top = tempY; //(change here)
}
function setCode(divName, code) {
var divEl = document.getElementById(divName);
codeEl.value = code;
divEl.style.display = "none";
}
function computeCoordinates() {
var isIE = document.all ? true : false;
var ScrollTop = document.body.scrollTop;
var _x = tempX;
var _y = tempY;
if (ScrollTop == 0) {
if (window.pageYOffset)
ScrollTop = window.pageYOffset;
else
ScrollTop = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
}
if (isIE) {
_x = tempX + document.body.scrollLeft;
_y = tempY + ScrollTop;
}

tempX = _x;//change here 
tempY = _y;//change here
}
function hideThis(id) {
document.getElementById(id).style.display = "none";
}

(上面的代码已经在 chrome 上进行了测试并按照接受的方式工作(

工作代码：

var IE = document.all ? true : false
var codeEl;
// If NS -- that is, !IE -- then set up for mouse capture
if (!IE) document.captureEvents(Event.MOUSEMOVE)
// Set-up to use getMouseXY function onMouseMove
document.onmousemove = getMouseXY;
// Temporary variables to hold mouse x-y pos.s
var tempX = 0; //declare 
var tempY = 0; //declare
var mouseX = 0;
var mouseY = 0;
//var frm = document.dashboardSearchForm;
function getMouseXY(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft
tempY = event.clientY + document.body.scrollTop
} else { // grab the x-y pos.s if browser is NS
tempX = e.pageX
tempY = e.pageY
}
// catch possible negative values in NS4
if (tempX < 0) {
tempX = 0
}
if (tempY < 0) {
tempY = 0
}
return true;
}
function showCodeLookup(el, divName) {
//Hide any lookup tables that are displayed first
document.getElementById("divSpec").style.display = "none";
var divCodes = document.getElementById(divName);
codeEl = el;
computeCoordinates();
divCodes.style.display = "block";
divCodes.style.top = tempX +'px'; //(change here)assigning coordinate found
divCodes.style.left = tempY +'px'; //(change here)
}
function setCode(divName, code) {
var divEl = document.getElementById(divName);
codeEl.value = code;
divEl.style.display = "none";
}
function computeCoordinates() {
var isIE = document.all ? true : false;
var ScrollTop = document.body.scrollTop;
var _x = tempX;
var _y = tempY;
if (ScrollTop == 0) {
if (window.pageYOffset)
ScrollTop = window.pageYOffset;
else
ScrollTop = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
}
if (isIE) {
_x = tempX + document.body.scrollLeft;
_y = tempY + ScrollTop;
}
tempX = _x; //change here 
tempY = _y; //change here
}
function hideThis(id) {
document.getElementById(id).style.display = "none";
}

.lookupTable
{
display:none;
padding:5px;
z-index:10;
font-size: 10px; 
position: absolute;
border: 2px solid #933; 
background-color:white; 
width: 220px; 
height:180px; 

}

<html>
<body>
<div class="mRow">
<label for="SS">Special Subjects:</label>
<span class="numLbls">1. </span><input type="text" name="ade" value="<%=ade[0]%>" size="6" maxlength="6" onclick="showCodeLookup(this, 'divSpec')" />
<span class="numLbls">2. </span><input type="text" name="ade" value="<%=ade[1]%>" size="6" maxlength="6" onclick="showCodeLookup(this, 'divSpec')" />
<span class="numLbls">3. </span><input type="text" name="ade" value="<%=ade[2]%>" size="6" maxlength="6" onclick="showCodeLookup(this, 'divSpec')" />
</div>
<div id="divSpec" class="lookupTable" onClick="hideThis(this.id)">
<table>
ddddddddd
</table>
</div>
</body>
</html>