首页 / JAVASCRIPT / JS获取鼠标光标位置

JS获取鼠标光标位置

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JS获取鼠标光标位置，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2263字，纯文字阅读大概需要4分钟。

内容图文

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .container {
        width: 100px;
        height: 100px;
        border: 1px solid #ccc;
        overflow: auto;
      }
      .lis {
        height: 20px;
      }
    </style>
  </head>

  <body>
    <p>
      <input
        class="input"
        id="textbox"
        name="textbox"
        value="Hi,www.jb51.net!!!"
      />
    </p>

    <input
      type="button"
      onclick="alert( getPositionForInput( document.getElementById('textbox') ) )"
      value="Get Position"
    />

    <input type="text" id="no1" size="1" /><input
      type="button"
      onclick="process('no1','textbox');"
      value="Set Position"
    />

    <textarea
      id="zhangdanNum"
      name="zhangdanNum"
      style="height: 66px; width: 246px; overflow: hidden"
    >
Hi,CssRain!!!</textarea
    >
    <input
      type="button"
      onclick="alert( getPositionForTextArea( document.getElementById('zhangdanNum') ) )"
      value="Get Position"
    />
    <input type="text" id="no2" size="1" /><input
      type="button"
      onclick="process('no2','zhangdanNum');"
      value="Set Position"
    />
    <script>
      function getPositionForInput(ctrl) {
        var CaretPos = 0;
        if (document.selection) {
          // IE Support
          ctrl.focus();
          var Sel = document.selection.createRange();
          Sel.moveStart("character", -ctrl.value.length);
          CaretPos = Sel.text.length;
        } else if (ctrl.selectionStart || ctrl.selectionStart == "0") {
          // Firefox support
          CaretPos = ctrl.selectionStart;
        }
        return CaretPos;
      }
      function getPositionForTextArea(ctrl) {
        var CaretPos = 0;
        if (document.selection) {
          // IE Support
          ctrl.focus();
          var Sel = document.selection.createRange();
          var Sel2 = Sel.duplicate();
          Sel2.moveToElementText(ctrl);
          var CaretPos = -1;
          while (Sel2.inRange(Sel)) {
            Sel2.moveStart("character");
            CaretPos++;
          }
        } else if (ctrl.selectionStart || ctrl.selectionStart == "0") {
          // Firefox support
          CaretPos = ctrl.selectionStart;
        }
        return CaretPos;
      }
      function setCursorPosition(ctrl, pos) {
        if (ctrl.setSelectionRange) {
          ctrl.focus();
          ctrl.setSelectionRange(pos, pos);
        } else if (ctrl.createTextRange) {
          var range = ctrl.createTextRange();
          range.collapse(true);
          range.moveEnd("character", pos);
          range.moveStart("character", pos);
          range.select();
        }
      }
      function process(id, targetId) {
        var no = document.getElementById(id).value;
        setCursorPosition(document.getElementById(targetId), no);
      }
    </script>
  </body>
</html>

内容总结

以上是互联网集市为您收集整理的JS获取鼠标光标位置全部内容，希望文章能够帮你解决JS获取鼠标光标位置所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1026101.html

来源：【匿名】