Question

我想在用户输入文字的区域下显示一些内容，例如div

我设法通过selectionStart/End来获取他当前正在输入的位置，但是我如何才能实际计算出他的光标的坐标（x，y）？

我想除了这两种方式还有其他实现方式：

计算行用户所在的位置（基于字体大小，文本区域宽度和该文本区域中的字符数）。
x在此行中以textarea.X + selectionStart的形式
y为textarea.Y + rows * font size

我找到了this，但已经快10岁了

Answer 1

https://github.com/Codecademy/textarea-helper

$('textarea').on('keyup paste cut mouseup', function () {
  // Get the textarea's content height.
  var contentHeight = $(this).textareaHelper('height')
  // Set the textarea to the content height. i.e. expand as we type.
  $(this).height(contentHeight);
  
  // Follow the caret arounbd.
  $('.tail').css(
    $(this).textareaHelper('caretPos')
  );
});

// Call it manually at first. 
$('textarea').keyup();

.tail {
  background: red;
  width: 50px;
  min-height: 50px;
  position: absolute;
}

textarea {
  width: 250pxpx;
  min-height: 100px;
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://rawgit.com/Codecademy/textarea-helper/master/textarea-helper.js"></script>

<textarea></textarea>
<div class="tail"></div>

在文本区域中输入文字时，获取光标的（x，y）坐标

1 个答案: