光标悬停时，textarea的弹出窗口无法正常显示

Question

我想在textarea上的光标上进行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

为什么不像下面那样手动微调。我认为这是最简单的方法：

＆＃13;

＆＃13;

$(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);
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;