如何获得嵌套在textarea中的跨度的位置

Question

我有一个嵌套在textarea中的span，并希望获得相对于文档的此跨度的偏移量。对于左侧和顶部总是返回零，我不知道为什么。

以下是jsFiddle，其中包含以下演示代码

$(document).ready(function(){
  $("#textarea1").html("1234 <span id='span1' style='color:red'>5678</span>");
  var offset = $("#span1").offset();
  alert("span1 left: " + offset.left + "  top: " + offset.top);
});

我知道为什么跨度的位置相对于textarea而言为零。但我不明白为什么偏移量会返回零。如果有人能帮助我，我会很感激。

---

编辑：我的目标是在点击时将某些内容放在跨度上方。我无法获得上述跨度的偏移，所以我决定使用鼠标坐标。

$("#id").dblclick(function(e){
 alert("X: " + e.pageX + " Y: " + e.pageY);
});

Answer 1

DOM不知道这个span，因为它只包含在textarea的value属性中。

为了计算页面上的x，y坐标，您需要遵循文本区域中的字符/行并计算放置光标的大致位置。这不是一项简单的任务，主要是因为计算自由流动文本的换行符（特别是没有单空格字体是很有挑战性的）。