在 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>