首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在Textarea中的光标位置显示DIV

在Textarea中的光标位置显示DIV是一种在文本编辑器中的特殊需求,通常用于实现自定义的输入提示或者自动补全功能。要实现这个功能,需要使用JavaScript和CSS来完成。

以下是一个简单的示例代码,可以在Textarea中的光标位置显示一个DIV:

代码语言:javascript
复制
const textarea = document.querySelector('textarea');
textarea.addEventListener('input', () => {
  const cursorPosition = textarea.selectionStart;
  const textBeforeCursor = textarea.value.substring(0, cursorPosition);
  const textAfterCursor = textarea.value.substring(cursorPosition);
  const div = document.createElement('div');
  div.style.position = 'absolute';
  div.style.top = '0';
  div.style.left = '0';
  div.style.backgroundColor = 'white';
  div.style.border = '1px solid black';
  div.style.padding = '5px';
  div.textContent = 'Hello, world!';
  textarea.parentNode.insertBefore(div, textarea.nextSibling);
  const rect = textarea.getBoundingClientRect();
  const cursorRect = textarea.getBoundingClientRect();
  div.style.top = `${cursorRect.top - rect.top}px`;
  div.style.left = `${cursorRect.left - rect.left}px`;
});

这段代码首先获取Textarea元素,并在其上添加一个input事件监听器。当用户在Textarea中输入时,会触发这个事件。在事件处理程序中,我们获取光标的位置,并使用substring方法将文本分成两部分:光标前的文本和光标后的文本。然后,我们创建一个DIV元素,并设置其样式和文本内容。最后,我们将这个DIV元素插入到Textarea元素的下一个兄弟节点中,并使用getBoundingClientRect方法计算光标的位置,以便将DIV元素放置在正确的位置。

需要注意的是,这只是一个简单的示例代码,实际应用中可能需要更复杂的逻辑来实现更复杂的功能。例如,可以使用第三方库来实现更高级的自动补全功能,或者使用Web Worker来实现更高效的文本处理。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券