首页
学习
活动
专区
工具
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来实现更高效的文本处理。

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

相关·内容

位置编码注意机制作用

在运行 RNN 或 LSTM 时,隐藏状态保留单词句子相对位置信息。...然而, Transformer 网络,如果编码器包含一个前馈网络,那么只传递词嵌入就等于为您模型增加了不必要混乱,因为词嵌入没有捕获有关句子顺序信息。...为了处理单词相对位置问题,位置编码想法出现了。 在从嵌入层提取词嵌入后,位置编码被添加到这个嵌入向量。 解释位置编码最简单方法是为每个单词分配一个唯一数字 ∈ ℕ 。...表示时域信号最佳方式是通过正弦方程 sin(ωt)。如果我们巧妙地使用这个波动方程,我们可以一次拍摄捕获词嵌入时间和维度信息。 让我们看一下这个等式,接下来步骤,我们将尝试把它形象化。...这是我对注意力机制中使用位置编码看法。接下来系列,我将尝试撰写有关编码器-解码器部分内容,并将注意力应用于现实世界规模问题。

1.9K41

【实战】我是如何在输入框实现@ At功能

作者:InfinityTomorrow 授权转载 链接:https://juejin.cn/post/6982251438332182542 一、前言 最近接手了一个需求,评论框实现 @At通知用户功能...) 当前需求拆解 按住shift + @ 时候,弹出通知列表 选择时 @用户标签插入当前光标位置 生成@用户标签规则是:高亮、携带用户ID、一键删除信息、不可以编辑。...没有完美的方案(ps:只有不听话产品经理) 产品经理) textarea、input(例:新浪微博) 流程大概都是(监听keyup, 获取光标位置拆入@节点...), 但是...相信我如果你手写,...获取光标的坐标文本位置 caret-pos 从 textarea、contentedtiable 或 iframe 正文中获取插入符号/光标位置/偏移量 import { position, offset...这个功能只是开发挤出来、很多东西写不够好、不够完善,希望本文能帮助您在开发节约一点时间。也欢迎大家提出踊跃反馈、希望能与大家共进步,加油~

2.4K20

可编辑DIV设置光标位置

平时我们使用文本框input, textarea时,我们有时候需要得到光标位置或者说设置光标位置. 但是文本框有个不足,就是不能满足我们插入图片或者其他一些要求....所以有时候我们使用div来代替文本框. 今天为了搞定设置DI光标位置.头疼啊,终于可以了,记录一下,网上资料不多. 首先要让DIV启用编辑模式....下面说怎么获取或设置光标位置. 2个步骤 1:获取DIV光标位置 2:改变光标位置 var cursor = 0; // 光标位置 document.onselectionchange = function...(); //因为这里死从当前光标开始移动(好像文本框是从0算起.)所以我们需要拿到当前光标位置,然后就可以计算出要移动多少位了,这样就可以把光标移动到想要位置了 r.moveStart...光标移动到最后面了..

6.5K40

HTML入门

,要进行换行就必须使用 或 标签 段落标签 p 标签也有align属性,用来控制文字显示位置,默认值是left 段落 HTML实体 html文档中空格至多只能使用一次...标签通常用来将文本一部分独立出来,从而对独立出来内容设置单独样式 div 标签一行只能放一个 span 一行可以放多个 字符与图片标签 字符格式化标签 图片标签 img 标签:用来页面引入图片...align: 设置表格页面位置; 设置tr/td中文字对齐方式 bgcolor: 设置表格、tr、td背景色 列表与表单标签 列表 列表分为有序列表、无序列表和自定义列表三种 有序列表 有序列表由...--密码框--> 常用属性 value 和 placeholder value:字体颜色深;当光标定位到框光标值得最后。...value优先级高于placeholder placeholder:字体颜色浅;当光标定位到框光标最前面,可以直接输入值 单选框和复选框 name属性用来将单选框/复选框限制成为一组复选框name

2.9K40

网络名称空间Linux虚拟化技术位置

这一特性Linux虚拟化技术占据了核心位置,它不仅为构建轻量级虚拟化解决方案(如容器)提供了基础支持,也传统虚拟机技术中发挥作用,实现资源隔离和网络虚拟化。1....Linux虚拟化技术应用2.1. 容器化技术容器化技术(如Docker、Kubernetes),网络名称空间是实现容器网络隔离基石。...它可以用来实现虚拟机网络隔离,或者更复杂网络拓扑(例如,使用Linux Bridge或Open vSwitch)作为虚拟网络设备一部分。2.3....网络功能虚拟化(NFV)网络名称空间在网络功能虚拟化(NFV)也有其位置。NFV旨在利用虚拟化技术来构建网络服务,如虚拟私有网络(VPN)、防火墙、负载均衡等。...此外,围绕网络名称空间,开发了众多工具和库(如CNI、Netlink库等),为自定义网络解决方案开发提供了便利。4. 结论 网络名称空间Linux虚拟化技术占据着不可或缺位置

9200

getBoundingClientRect方法获取元素页面相对位置

获取元素位置可以用 offset 或 getBoundingClientRect,使用 offset 因为兼容性不好,比较麻烦,offset获取位置会形成“回溯”。...2.IE8及以下浏览器,返回值对象包含属性值有: top::元素上边缘距离文档顶部距离; right: 元素右边缘距离文档左边距离; bottom:元素下边缘距离文档顶部距离; left:...元素左边缘距离文档左边距离; 3.IE9以上、谷歌、火狐等浏览器,返回值对象包含属性值有: top: 元素上边缘距离文档顶部距离; right:元素右边缘距离文档左边距离; bottom:元素下边缘距离文档顶部距离...; left:元素左边缘距离文档左边距离; width:元素宽度(包含 padding 和 border) height:元素高度(包含 padding 和 border) 4.IE8及以下浏览器没有...width 和 height 属性解决方法: IE8及以下浏览器,可以通过计算得到元素宽和高: 如: var dom = document.querySelector("#demo"), r

3.8K20

Power Pivot概念(1)—Power PivotExcel位置

Power Pivot简称PP,可以理解为超级透视表,是Excel在数据透视表上功能加持。和Power Query比,其主要是处于数据分析阶段。 ? PP,基于函数来完成,其使用是DAX语言。...大部分操作都是关联筛选后作出计算和分析。 一、 PPExcel位置 (一) 直接在开发工具加载项下加载,COM加载项里面。 ? (二) 文件选项菜单里面加载 ?...(三) Excel菜单栏位置 ? (四) Power Pivot主界面的位置 ? PP中有3个主要点。 1. 添加列 作用:添加列主要是作为维度或者固定值进行分析。...例如切片器使用,分类文本或者数字,严格绑定当前行表达式。 位置:在数据表最右侧。 2. 度量值 作用:度量值主要是作为值进行计算分析。 位置横向分隔符下面区域。 3....表间关系 作用:ExcelPower Pivot主要有1对多,多对1关系。这种关系对于数据计算有着非常重要影响。 位置关系透视图菜单选项里可以查看。

3K10
领券