2.设计一个含有表单的页面,并在表单上放一个文本框,当鼠 标在表单上移动时,把相对于表单的鼠标坐标的显示在文本框中。
时间: 2024-02-25 11:57:08 浏览: 18
好的,我可以为您提供一个示例。以下是一个包含表单和文本框的 HTML 页面,当鼠标在表单上移动时,会将相对于表单的鼠标坐标显示在文本框中。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单示例</title>
<script>
function showCoordinates(event) {
var x = event.clientX - event.target.offsetLeft;
var y = event.clientY - event.target.offsetTop;
document.getElementById("coordinates").value = "X: " + x + ", Y: " + y;
}
</script>
</head>
<body>
<form onmousemove="showCoordinates(event)">
<label for="coordinates">鼠标坐标:</label>
<input type="text" id="coordinates" name="coordinates" readonly>
</form>
</body>
</html>
```
在这个示例中,我们使用了 `onmousemove` 事件来监听鼠标在表单上的移动。当事件触发时,我们计算出相对于表单的鼠标坐标,并将它们显示在文本框中。注意,我们使用了 `event.target.offsetLeft` 和 `event.target.offsetTop` 来获取表单的左上角坐标,以便计算相对坐标。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)