在Textarea中有多行文本内容我想实现鼠标光标点到的位置那一行的index=-1 即 textarea 背后出现绿色的一个长方形div 来做指示可以实现吗？textarea id=deepL-text style=display block; placeholder= 放 DeepL 的通篇纯文本翻译。 双击内容可以滚动到顶部。 spellcheck=truetextarea div id=

可以实现。你可以通过监听 textarea 的鼠标事件来获取鼠标光标所在的行数，然后根据行数计算出需要显示的位置和高度，再将对应的样式应用到背后的 div 上即可。

以下是一个示例代码：

const textarea = document.getElementById('deepL-text');
const backDiv = document.getElementById('back-div');

textarea.addEventListener('mousemove', function(e) {
  const lineHeight = parseInt(getComputedStyle(this).lineHeight);
  const scrollTop = this.scrollTop;
  const y = e.pageY - this.offsetTop + scrollTop;
  const lineIndex = Math.floor(y / lineHeight);
  
  if (lineIndex >= 0 && lineIndex < this.value.split('\n').length) {
    backDiv.style.display = 'block';
    backDiv.style.top = (lineIndex * lineHeight + scrollTop) + 'px';
    backDiv.style.height = lineHeight + 'px';
  } else {
    backDiv.style.display = 'none';
  }
});

textarea.addEventListener('mouseleave', function() {
  backDiv.style.display = 'none';
});

上述代码监听了 textarea 的鼠标移动事件，计算出鼠标光标所在的行数，然后根据行数计算出需要显示的位置和高度，并将对应的样式应用到背后的 div 上。同时，当鼠标离开 textarea 区域时，将背后的 div 隐藏起来。

需要注意的是，由于 textarea 的行高可能不是固定的，所以我们需要通过 getComputedStyle 函数获取实际的行高。同时，由于 textarea 可能出现滚动条，我们需要通过 scrollTop 属性获取当前的滚动位置，然后将计算出的行高和滚动位置相加，才能得到正确的显示位置