在 JavaScript 中获取光标位置

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

在 JavaScript 中获取光标位置

作者：迹忆客最近更新：2023/09/09 浏览次数：

JavaScript 与基本位置属性 SelectionStart 和 SelectionEnd 合并在一起，我们只能从字符串文字的第 0 个索引中检索位置值。其他属性在基于坐标标记提取位置值方面也发挥着至关重要的作用。

在这种情况下，参考点可能会变化，从而导致不同帧对应的不同值。以下部分将演示 SelectionStart 和 SelectionEnd 属性的示例。

我们还将考虑 screenX/Y、clientX/Y 和 pageX/Y 的工作原理，其中三个属性基于坐标系。但是，首先让我们进入主要部分！

使用selectionStart和selectionEnd属性来获取光标位置

SelectionStart 和 SelectionEnd 属性是读/写属性。您可以使用位置值定义它们，也可以采用默认值来执行读取操作。

还有 getSelectionRange 属性，它显式获取 SelectionStart 和 SelectionEnd 值并计算出子字符串的特定范围。使用字符串是有限的，因为它们仅适用于某些特定属性。

例如，输入：文本、输入：文本区域、输入：密码等。您可以在此特定文档中了解更详细的方面。在这里演示的实例中，我们将仅展示选择开始的只读方法。

当讨论只读约定时，selectionStart 和 SelectionEnd 的执行方式类似。它打印光标经过的字符串字符的位置。

准确地说，光标是这些属性起作用的文本类型光标。所以，我们只得到水平部分的位置，计算取决于字符数。那么让我们来看看它是如何工作的。

代码片段：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Get Cursor</title>
</head>
<body>
    <input id="Javascript_example" name="one" type="text" value="Javascript example" onmousemove="textbox()">
    <p id="vals"></p>
    <script>
       function textbox(){
           var ctl = document.getElementById('Javascript_example');
           var startPos = ctl.selectionStart;
           document.getElementById('vals').innerText = startPos;
       }
    </script>
</body>
</html>

输出:

在javascript中获取光标位置 - 使用selectionstart和selectionend属性来获取光标位置

SelectionEnd 在这里的表现类似，所以我们没有添加任何预览。您可以尝试查看与 SelectionStart 属性相同的结果。它是这些属性的只读部分。

使用 screenX/Y 属性获取光标位置

对于 screenX/Y 属性，我们计算参考点引用的位置。坐标值严格遵循一定的参照点来表示位置。

这里的光标位置为默认光标；因此，我们将使用 onmousemove 属性来跟踪位置。 screenX/Y 是只读属性，它遵循参考点作为全局或整个屏幕坐标。让我们看一下下面的例子。

代码片段：

<!DOCTYPE html>
<html>
   <head>
       <title>Get Cursor</title>
   </head>
   <body>
       <p>Move your mouse to see its position.</p>
       <p id="screen-log" style="height:900px;width:600px; text-align:center"></p>
   </body>
   <script>
       let screenLog = document.querySelector('#screen-log');
       document.addEventListener('mousemove', logKey);

       function logKey(e) {
          screenLog.innerText = `
          Screen X/Y: ${e.screenX}, ${e.screenY}`;
       }
   </script>
</html>

输出：

在 javascript 中获取光标位置 - 使用 screenxy 属性获取光标位置

可以看出，坐标值随着光标的移动位置而更新。此外，在某一部分中，您会注意到滚动不会影响光标的位置。

这意味着每当页面上下或左右滚动时，整个页面就会冻结，并根据屏幕尺寸计算该框架实例的位置。

使用 clientX/Y 获取光标位置

clientX/Y 也是一个只读属性，以参考点为视口。在这方面，上下滚动的视口保持静止，并测量坐标值。

更清楚地说，如果您位于页面的顶部，那么 y 值将为 0。据说，您已向下滚动到 20 像素，如果您尝试检索 y 值，它仍将显示为 0 。

这意味着无论占据视口的部分是什么，都只会被考虑在内。

代码片段：

<!DOCTYPE html>
<html>
   <head>
       <title>Get Cursor</title>
   </head>
   <body>
      <p>Move your mouse to see its position.</p>
      <p id="screen-log" style="height:900px;width:600px; text-align:center"></p>
   </body>
   <script>
       let screenLog = document.querySelector('#screen-log');
       document.addEventListener('mousemove', logKey);

       function logKey(e) {
           screenLog.innerText = `
           Client X/Y: ${e.clientX}, ${e.clientY}`;
       }
      </script>
</html>

输出：

在 javascript 中获取光标位置 - 使用 clientxy 获取光标位置

因此，在我们检查页面顶部值（y）的部分，结果为 0。向下滚动一点时，该值仍然为 0。因此，我们可以对 x 轴值执行类似的任务。

使用 pageX/Y 属性获取光标位置值

与 screenX/Y 和 clientX/Y 类似，pageX/Y 也是只读属性。但与这些属性不同的是，pageX/Y 在计算值时会考虑整个页面的尺寸。

这意味着如果视口的长度大于屏幕上的视口的长度，则该属性将计入整个页面的整个尺寸。这样我们就可以通过这个属性更直观的获取重要的部分或者光标位置。

代码片段：

<!DOCTYPE html>
<html>
   <head>
       <title>Get Cursor</title>
   </head>
   <body>
       <p>Move your mouse to see its position.</p>
       <p id="screen-log" style="height:900px;width:600px; text-align:center"></p> 
   </body>
   <script>
       let screenLog = document.querySelector('#screen-log');
       document.addEventListener('mousemove', logKey);

       function logKey(e) {
          screenLog.innerText = `Page X/Y: ${e.pageX}, ${e.pageY}`;
       }
   </script>
</html>

输出：

在 javascript 中获取光标位置 - 使用 pagexy 属性获取光标位置值

可以看到，当我们没有滚动滚动条时，y轴的顶部位置值为0。

当我们向下滚动一点时，顶部显示的y值是向下滚动到的像素数，即58。所以现在我们可以根据工作来比较讨论哪种属性更合适目的。

上一篇：在 JavaScript 中将数字四舍五入到最接近的 10

下一篇：JavaScript boolean.prototype 属性

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

Do you understand JavaScript closures?

发布时间：2025/02/21 浏览次数：108 分类：JavaScript

The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.

Do you know about the hidden traps in variables in JavaScript?

发布时间：2025/02/21 浏览次数：178 分类：JavaScript

Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av

How much do you know about the Prototype Chain?

发布时间：2025/02/21 浏览次数：150 分类：JavaScript

The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start

jQuery 中的日期选择器

发布时间：2024/03/24 浏览次数：99 分类：JavaScript

本文将讨论使用 jQuery UI 库的 jQuery 中的 Datepicker。

用 jQuery 检查复选框是否被选中

发布时间：2024/03/24 浏览次数：102 分类：JavaScript

在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的

jQuery 中的 $.Ajax 数据类型

发布时间：2024/03/24 浏览次数：133 分类：JavaScript

本教程演示了在 jQuery 中使用 $.ajax 数据类型。

在 jQuery 中检查字符串是否包含子字符串

发布时间：2024/03/24 浏览次数：106 分类：JavaScript

本教程演示了如何在 jQuery 中使用 contains() 方法。

在 jQuery 中检查和取消检查复选框

发布时间：2024/03/24 浏览次数：94 分类：JavaScript

本文演示了如何使用 jQuery 选中和取消选中复选框。

jQuery 中的 Window.onload 与 $(document).ready

发布时间：2024/03/24 浏览次数：180 分类：JavaScript

本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。

迹忆客专注技术分享