使用Javascript将鼠标点击坐标插入文本输入框
Insert Mouse Click Coordinates into text input box with Javascript
我的页面上有一个HTML5画布,还有两个文本输入字段。当用户单击画布(并且仅在画布内)时,我希望将鼠标坐标回显到页面上的文本输入框中。帮助如果您需要更多详细信息,请询问。
我从下面评论中的一个链接中找到了这个,但似乎无法让它发挥作用?:
文本输入:
<input type="number" name="MouseX" id="text_x" min="10" max="600" />
<input type="number" name="MouseY" id="text_y" min="0" max="480" />
Javascript:
<script>
function relMouseCoords(event){
var totalOffsetX = 0;
var totalOffsetY = 0;
var canvasX = 0;
var canvasY = 0;
var currentElement = this;
do{
totalOffsetX += currentElement.offsetLeft;
totalOffsetY += currentElement.offsetTop;
}
while(currentElement = currentElement.offsetParent)
canvasX = event.pageX - totalOffsetX;
canvasY = event.pageY - totalOffsetY;
return {x:canvasX, y:canvasY}
}
HTMLCanvasElement.prototype.relMouseCoords = relMouseCoords;
coords = canvas.relMouseCoords(event);
document.Show.MouseX.value = coords.x;
document.Show.MouseY.value = coords.y;
</script>
UPDATE以下是适用于我的代码:HTML:
<div id="canvasContainer" onclick="point_it(event)">
<canvas id="canvas" width="640" height="500">
<p>Unfortunately, your browser is currently unsupported by our web
application. We are sorry for the inconvenience. </p>
</canvas>
和JS:
<script language="JavaScript">
// Get mouse click coordinates within canvas element
function point_it(event){
pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("canvasContainer").offsetLeft;
pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("canvasContainer").offsetTop;
document.getElementById("canvas").style.left = (pos_x-1) ;
document.getElementById("canvas").style.top = (pos_y-15) ;
document.getElementById("canvas").style.visibility = "visible" ;
document.getElementById("text_x").value = pos_x;
document.getElementById("text_y").value = pos_y;
}
</script>
您需要添加一个点击事件,并使用事件参数调用函数。
document.getElementById("canvas").onclick = function(event) {
var coords = canvas.relMouseCoords(event);
document.getElementById("text_x").value = coords.x;
document.getElementById("text_y").value = coords.y;
}
实时示例
相关文章:
- 我可以在网页正文中插入文本链接吗
- 使用.format在一些HTML代码中插入文本,会出现错误(Python)
- JavaScript 在文本区域中的特定位置插入文本
- CKEditor - 插入文本在 setData 之后不起作用
- 在两个括号内插入文本 - Javascript
- 将值插入文本区域可以绕过所需的检查
- Applescript运行Javascript,并在提示中插入文本
- 如何在Web SQL数据库中逐行插入文本文件
- 如何在Wysihtml5沙盒编辑器中的光标位置插入文本
- 如果在 IE 中最后附加光标,则在光标位置的文本区域中插入文本
- 是否可以在文本区域中插入文本并更新撤消/重做队列
- Javascript:在指定行插入文本
- 在文本字段中插入文本后聚焦光标
- 使用 Greasemonkey 在现有元素之前插入文本节点时出现问题
- 在当前卡雷位置插入文本不起作用(多个文本框)
- 通过查询将文本插入文本区域
- 单击插入文本或清理
- 当有人选择选项时,如何将MySQL中的数据插入文本区域
- 使用 jQuery/Javascript 将鼠标悬停在按钮上时将文本插入文本和帮助文本
- 使用Javascript将鼠标点击坐标插入文本输入框