javascript - 光标悬停时文本区域的弹出窗口未正确显示

Question

我想要文本区域中光标的 x 和 y 坐标..

$(document).ready(function() {
  var cols = document.getElementById('t').cols;
  var width = document.getElementById('t').clientWidth;
  var height = $('textarea').css('line-height');
  var pos = $('textarea').position();
  $('#t').on('keyup', function() {
    el = document.getElementById("t");
    if (el.selectionStart) {
      selection = el.selectionStart;
    } else if (document.selection) {
      el.focus();
      var r = document.selection.createRange();
      if (r == null) {
        selection = 0;
      }
      var re = el.createTextRange(),
        rc = re.duplicate();
      re.moveToBookmark(r.getBookmark());
      rc.setEndPoint('EndToStart', re);
      selection = rc.text.length;
    } else {
      selection = 0
    }
    var row = Math.floor((selection - 1) / cols);
    var col = (selection - (row * cols));
    var x = Math.floor((col * (width / cols)));
    var y = (parseInt(height) * row);
    $('span').html("row: " + row + "<br>columns" + col + "<br>width: " + width + "<br>x: " + x + "px<br>y: " + y + "px<br>Scrolltop: " + $(this).scrollTop()).css('top', pos.top + y - $(this).scrollTop()).css('left', pos.left + x + 10);
  });
});

textarea {
  height: 80px;
  line-height: 12px;
  overflow-y: scroll;
}
span {
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="t"></textarea>
<br>
<span id="tooltip" style="background:yellow"></span>

但是输入后弹出窗口不在正确的位置..我希望弹出窗口位于光标的正下方..请不要使用插件..需要简单的 jquery/javascript。

Answer 1

为什么不像下面这样手动微调它呢。我认为这将是最简单的方法:

$(document).ready(function() {
  var cols = document.getElementById('t').cols;
  var width = document.getElementById('t').clientWidth;
  var height = $('textarea').css('line-height');
  var pos = $('textarea').position();
  $('#t').on('keyup', function() {
    el = document.getElementById("t");
    if (el.selectionStart) {
      selection = el.selectionStart;
    } else if (document.selection) {
      el.focus();
      var r = document.selection.createRange();
      if (r == null) {
        selection = 0;
      }
      var re = el.createTextRange(),
        rc = re.duplicate();
      re.moveToBookmark(r.getBookmark());
      rc.setEndPoint('EndToStart', re);
      selection = rc.text.length;
    } else {
      selection = 0
    }
    var row = Math.floor((selection - 1) / cols);
    var col = (selection - (row * cols));
    var x = Math.floor((col * (width / cols))) - 5;
    var y = (parseInt(height) * row)+20;
    $('span').html("row: " + row + "<br>columns" + col + "<br>width: " + width + "<br>x: " + x + "px<br>y: " + y + "px<br>Scrolltop: " + $(this).scrollTop()).css('top', pos.top + y - $(this).scrollTop()).css('left', pos.left + x + 10);
  });
});

textarea {
  height: 80px;
  line-height: 12px;
  overflow-y: scroll;
}
span {
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="t"></textarea>
<br>
<span id="tooltip" style="background:yellow"></span>