JSP：将 DIV 定位在特定坐标处不起作用
我正在尝试在输入框的坐标上放置一个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;
}
Javascript
// 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;
}
任何建议请。我已经添加了警报 showCodeLookup（），它给了我正确的坐标，比如 1036 表示 Y，536 表示 X。
富国沪深1回答
-
POPMUISE
我已经在Chrome上测试了您的代码，发现在您的js代码中并且是空的或未定义的。因此，当您将这些值分配给 div 时，它并未将其定位到所需的坐标。相反，我已经在您的js代码中进行了某些更改，如下所示：document.Show.sMouseY.valuedocument.Show.sMouseX.valuedivSpecvar IE = document.all ? true : falsevar codeEl;// If NS -- that is, !IE -- then set up for mouse captureif (!IE) document.captureEvents(Event.MOUSEMOVE)// Set-up to use getMouseXY function onMouseMovedocument.onmousemove = getMouseXY;// Temporary variables to hold mouse x-y pos.svar tempX = 0;//declare var tempY = 0;//declarevar 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 : falsevar codeEl;// If NS -- that is, !IE -- then set up for mouse captureif (!IE) document.captureEvents(Event.MOUSEMOVE)// Set-up to use getMouseXY function onMouseMovedocument.onmousemove = getMouseXY;// Temporary variables to hold mouse x-y pos.svar tempX = 0; //declare var tempY = 0; //declarevar 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>
随时随地看视频慕课网APP
相关分类
JavaScript