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

如何在插入新文本javascript后保持光标位置

在插入新文本后保持光标位置,可以通过以下步骤实现:

  1. 获取当前光标位置:使用JavaScript的Selection对象或Range对象来获取当前光标的位置。可以使用window.getSelection()方法获取Selection对象,或者使用document.getSelection()方法获取Range对象。
  2. 在插入新文本之前,保存当前光标位置:将获取到的光标位置保存在变量中,以便在插入新文本后恢复光标位置。
  3. 插入新文本:使用JavaScript的DOM操作方法,例如insertBefore()insertAfter()appendChild()等方法,在指定位置插入新文本。
  4. 恢复光标位置:使用保存的光标位置,将光标移动到插入新文本后的位置。可以使用Selection对象的collapse()方法将光标折叠到指定位置,或者使用Range对象的setStart()setEnd()方法设置光标的起始和结束位置。

以下是一个示例代码,演示如何在插入新文本后保持光标位置:

代码语言:txt
复制
// 获取当前光标位置
function getCursorPosition() {
  var cursorPos = 0;
  var sel, range;
  if (window.getSelection) {
    sel = window.getSelection();
    if (sel.rangeCount) {
      range = sel.getRangeAt(0);
      if (range.commonAncestorContainer.parentNode == document.getElementById('textarea')) {
        cursorPos = range.endOffset;
      }
    }
  } else if (document.selection && document.selection.createRange) {
    range = document.selection.createRange();
    if (range.parentElement() == document.getElementById('textarea')) {
      var tempEl = document.createElement('span');
      document.getElementById('textarea').insertBefore(tempEl, document.getElementById('textarea').firstChild);
      var tempRange = range.duplicate();
      tempRange.moveToElementText(tempEl);
      tempRange.setEndPoint('EndToEnd', range);
      cursorPos = tempRange.text.length;
    }
  }
  return cursorPos;
}

// 在指定位置插入新文本
function insertTextAtCursor(text) {
  var textarea = document.getElementById('textarea');
  var cursorPos = getCursorPosition();
  var front = (textarea.value).substring(0, cursorPos);
  var back = (textarea.value).substring(cursorPos, textarea.value.length);
  textarea.value = front + text + back;
  cursorPos += text.length;
  textarea.setSelectionRange(cursorPos, cursorPos);
  textarea.focus();
}

// 在插入新文本后保持光标位置
function insertAndKeepCursor(text) {
  var textarea = document.getElementById('textarea');
  var cursorPos = getCursorPosition();
  insertTextAtCursor(text);
  textarea.setSelectionRange(cursorPos, cursorPos);
  textarea.focus();
}

在上述示例中,getCursorPosition()函数用于获取当前光标位置,insertTextAtCursor()函数用于在指定位置插入新文本,insertAndKeepCursor()函数用于在插入新文本后保持光标位置。

请注意,上述示例代码仅为演示目的,实际应用中可能需要根据具体情况进行适当的修改和调整。

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

相关·内容

  • 效率工具Markdown

    +一个空格 实例: 学习 游戏 听音乐 代码 三个```开头即可插入代码 三个```编程语言名称即可插入指定编程语言的代码块 cout<<"hello Tisox"<<endl; 数学公式 如果要在文本行中插入数学公式...,key2:value2} {,,,} 特点 不需要具有相同的类型 元祖的元素不能修改 键值对形式 无序的不重复元素列 ---- 使用技巧 技巧一 如何在序列表之后插入代码块。...接着上一步的回车操作之后出现序号2,此时我们再按一下Tab,之后会把的序号2变成序号1的子序号1....紧接上一步,出现子序号1时,我们按下删除把子序号删除掉,保持删除光标位置不要动 在上一步删除操作结束,我们直接在光标处开始使用代码块的```languageType语法正常插入自己的代码。...到这里,你已经成功在序号1插入一段代码块了,那么我们光标移出代码块的位置,直接按下回车 你会发现它会自动工具上一条序号的大小自动排版下一个序号,也就是序号2,到此为止,我们重复上面的步骤,就可以如此往复的在每一个序号之后插入代码块

    3.6K20

    linux常用命令vi 退出_vi怎么退出编辑模式

    唯一区别就是插入命令会保持光标位置不变,追加命令会使光标移到原光标位置的下一个字母的位置进行文本插入。...2.修改文本 命令 r + 字母 ,修改光标所在位置的字母为指定的字母,r 命令只修改一个字母,操作完成依旧停留在命令模式,不需要按 Esc 键返回命令模式。...删除文本 1. 删除文本字母 命令 x ,删除光标所在位置的一个字母,并保持在命令模式。 2. 删除文本块 命令 dw ,删除光标所在 位置往后的一个单词,并保持在命令模式。...命令 d + 0 ,(数字零),删除光标所在位置直到行首的所有文本,并保持在命令行模式。 命令 d + $ ,删除光标所在位置直到行末的所有文本,并保持在命令行模式。...二、 退出操作说明 1. i 、o 与a 键区别 i: 在光标所在字符前开始插入 o: 在光标所在行的下面另起一插入 a: 在光标所在字符开始插入 ---- 进入编辑模式,按 o 键进行编辑编辑结束

    11K40

    【总结】vim命令使用总结,该来的还是躲不掉啊晕

    普通模式下没有任何提示符,输入命令立即执行,不需要回车,而且输入的字符不会在屏幕上显示出来。 编辑模式 编辑模式主要用于文本的编辑。..., 比如 4j 表示向下移动四行 插入模式 - 插入/追加文本 i - 从光标前开始插入字符 I - 从行首开始插入字符 a - 从光标开始插入字符 A - 从行尾开始插入字符 o - 在当前行之下另起一行...- 将光标处到行尾删除, 然后进入插入模式 ciw - 将光标所在的单词删除, 然后进入插入模式 cw or ce - 从光标位置开始, 修改单词 s - 删除当前字符, 然后进入插入模式 S - 清空当前行...- 进入可视化模式, 移动光标高亮选择, 然后可以对选择的文本执行命令( y - 复制) V - 进入可视化模式(行粒度选择) o - 切换光标到选择区开头/结尾 Ctrl + v - 进入可视化模式...y$ or Y - 复制, 从光标位置到行末 p - 在光标粘贴 P - 在光标前粘贴 gp - 在光标粘贴并把光标定位于粘贴的文本之后 gP - 在光标前粘贴并把光标定位于粘贴的文本之后 dd

    53221

    Linux——vi命令详解

    插入模式 按「i」切换进入插入模式「insert mode」,按”i”进入插入模式是从光标当前位置开始输入文件;   按「a」进入插入模式,是从目前光标所在位置的下一个位置开始输入文字...;   按「o」进入插入模式,是插入的一行,从行首开始输入文字。...$ 光标移动至行尾 Ctrl+f 向前翻屏 Ctrl+b 向后翻屏 Ctrl+d 向前翻半屏 Ctrl+u 向后翻半屏 i 在光标位置插入字符 a 在光标所在位置一个字符开始增加 o 插入的一行...a命令 该命令用于在光标当前所在位置之后追加新文本输入的文本放在光标之后,在光标的原文本将相应地向后移动。光标可在一行的任何位置。...最后提一下,如何在文本输入方式时将所输入文本删除。用户使用组合键即可,此时光标将返回插入开始的位置,并且Vi仍处于文本输入方式。

    12.7K21

    Vim 简单使用指南

    特点 无图形界面; 只能编辑文本内容,不能进行排版; 不支持鼠标操作; 无菜单、只有命令; 工作模式 命令模式:对文件进行常规编辑操作,定位、翻页、复制等,是vim的入口; 末行模式:执行保存、退出等功能...‘x 从光标位置开始选择文本 v 选中光标经过的完整行 V 垂直方向选中文本 ctrl + v 撤销 u 恢复撤销 ctrl + r 删除光标所在字符或选中文字 x 删除移动命令对应内容 d 删除光标所在行...查找str,n查找下一个,N查找上一个 /str 向后查找当前光标所在单词 * 向前查找当前光标所在单词 # 全局替换 :%s/旧文本/新文本/g 可视区域替换 :s/旧文本/新文本/g 确认替换 :%...s/旧文本/新文本/gc 当前字符前插入文本 i 行首插入文本 I 当前字符添加文本 a 行末添加文本 A 当前行插入一空行 o 当前行前插入一空行 O 打开内置文件浏览器,浏览当前目录下文件 :e...常用的配置如下: set autoindent " 按下回车,下一行缩进格式与上一行保持一直 set tabstop=4 " 设置

    52920

    vi命令详解(转)

    $ 光标移动至行尾 Ctrl+f 向前翻屏 Ctrl+b 向后翻屏 Ctrl+d 向前翻半屏 Ctrl+u 向后翻半屏 i 在光标位置插入字符 a 在光标所在位置一个字符开始增加 o 插入的一行...处,但是由于是从光标所在位置前开始插入,所以这个“!”就被挤到了插入文本之后。 I命令 该命令是将光标移到当前行的行首,然后在其前插入文本。...附加(append)命令 Vi提供了两个附加插入命令:a和A。 a命令 该命令用于在光标当前所在位置之后追加新文本输入的文本放在光标之后,在光标的原文本将相应地向后移动。...~ ~ 本例中光标文本“Come on!”被输入的文本挤到了后面。 A命令 该命令与a命令不同的是,A命令将把光标挪到所在行的行尾,从那里开始插入文本。...最后提一下,如何在文本输入方式时将所输入文本删除。用户使用组合键即可,此时光标将返回插入开始的位置,并且Vi仍处于文本输入方式。

    1.1K40

    vim简单使用教程

    ——————————正文开始—————————— 你想以最快的速度学习人类史上最好的文本编辑器VIM吗?你先得懂得如何在VIM幸存下来,然后一点一点地学习各种戏法。...(陈皓注:你会看到vim左下角有一个–insert–字样,表示,你可以以插入的方式输入了) 此时,你可以输入文本了,就像你用“记事本”一样。 如果你想返回 Normal 模式,请按 ESC 键。...现在,你知道如何在 Insert 和 Normal 模式下切换了。...a → 在光标插入 o → 在当前行插入一个行 O → 在当前行前插入一个行 cw → 替换从光标所在位置后到一个单词结尾的字符 简单的移动光标 0 → 数字零,到行头 ^ → 到本行第一个不是...假设你有一个字符串 (map (+) ("foo")).而光标键在第一个 o 的位置

    1.3K30

    Linux系列 使用vi文本编辑器

    命令模式:启动vi编辑器默认进入命令模式。该模式中主要完成光标移动、字符串查找,以及删除、复制、粘贴文件内容等相关操作。...a:在当前光标位置之后插入内容。 A:在光标所在行的末尾(行尾)插入内容。 i:在当前光标位置之前插入内容。 I:在光标所在行的开头(行首)插入内容。 o:在光标所在行的后面插入一个行。...O:在光标所在行的前面插入一个行。 (2)移动光标 光标方向的移动,直接按↑,↓,←,→一西个方向键完成相应的光标移动。 题页移动 按Page Dewn键或Crl+F组合键向下期动一整页内容。...在vi编辑器中,前一次被删除或复制的内容将会保存到剪切板缓冲区中,按p键即可将缓冲区中的内容粘贴到光标位置处之后,按P键则会粘贴到光标位置处之前。...---- 4.末行模式中的基本操作 在命令模式中按:键可以切换到末行模式,vi编辑器的最后一行中将显示”:提示符,用户可以在该提示符输入特定的末行命令,完成保存文件,退出编辑器,打开新文件,读取其他文件内容及字符串替换等丰富的功能操作

    39120

    【Linux入门】Vim文本编辑器

    1、新建文件(或编辑文件) 输入命令文件不存在,在编辑保存操作则为新建,文件存在,在编辑保存操作则为修改。...在这个模式下,可以使用键盘快捷键来移动光标、删除文本等,但无法输入内容。 插入模式(Insert mode):在这个模式下,你可以向文本中添加内容。在正常模式下,按下i键即可进入插入模式。...移动光标: 按键 功能 左箭头 光标向左移动一个字符 右箭头 光标向右移动一个字符 上箭头 光标向上移动一个字符 下箭头 光标向下移动一个字符 特殊按键功能 按键 功能 i 进入插入模式,在当前光标位置可输入文本内容...Esc 退出插入模式,返回正常模式 x 删除光标所在的字符 dd 删除光标所在的整行 yy 复制光标所在的整行 p 在光标所在位置粘贴之前复制的内容 u 撤销最近一次编辑操作 v 进入可视模式 / 搜索特定的文本...不保存并退出 vim 编辑器 :wq 保存并退出 vim 编辑器 :set paste 粘贴文本保持文本的原始格式和缩进 :数字 :10,表示直接跳转至第10行的开头 :set paste命令粘贴文本保持文本的原始格式和缩进

    73731

    超简单的 VIM 练级攻略

    ——————————正文开始—————————— 你想以最快的速度学习人类史上最好的文本编辑器 VIM 吗?你先得懂得如何在 VIM 幸存下来,然后一点一点地学习各种戏法。...现在,你知道如何在Insert和Normal模式下切换了。...第 1 类:各种插入模式 a→ 在光标插入 o→ 在当前行插入一个行 O→ 在当前行前插入一个行 cw→ 替换从光标所在位置后到一个单词结尾的字符 第 2 类:简单的移动光标 0→ 数字零...而光标键在第一个o的位置。...我建议你每天都学 1 到 2 个的命令。 在两到三周,你会感到 vim 的强大的。 有时候,学习 vim 就像是在死背一些东西。 幸运的是,vim 有很多很不错的工具和优秀的文档。

    1.1K30

    学会编写脚本详解

    vim scripts.sh i a u 切换为插入模式 ESC 切换为命令模式 按“i”切换进入插入模式 insert mode,从光标当前位置开始输入文件; 按“a”进入插入模式,...是从目前光标所在位置的下一个位置开始输入文字; 按“o”进入插入模式,是插入的一行,从行首开始输入文字。...不保存退出 wq 保持退出或者x保存退 w+文件名 另存为一个文件 2.3 移动光标 vi 可以直接用键盘上的光标来上下左右移动,但正规的 vi 是用小写英文字母 h、j、k、l,分别控制光标左...shfit+6:移动到光标所在行的"行首" 按 w:光标跳到下个字的开头 按 e:光标跳到下个字的字尾 按 b:光标回到上个字的开头 按#l:光标移到该行的第#个位置:5l,56l。...X:大写的 X,每按一次,删除光标所在位置的"前面"一个字符。 #X:例如,20X 表示删除光标所在位置的"前面"20 个字符。 dd:删除光标所在行。

    4.7K40

    真·富文本编辑器的演进之路-Span的整体性控制

    通过SpanWatcher控制 第二种方案,我们使用普通文本,但是对普通文本增加Span标记,并对这个Span做整体性控制,这种方案复杂一点,要处理的地方也比较多,但是由于它使用的是普通文本,所以在样式上可以和其它普通文本完全保持一致...控制选中 在讲解如何在普通文本中对Span做整体性控制前,我们先来考虑下选择的问题——如何让「整体性Span」的内部无法被选中。 首先,我们要知道,Edittext的光标也是一种Span。...也就是说,我们可以通过监听光标的移动事件,通过Selection实现当光标移动到Span内部时,让它重新移动到Span最近的边缘位置,从而让Span内部永远无法插入光标,这就是我们的主要思路。...,从而实现「整体性Span」中间无法插入光标。...当我们检测到这两个事件,根据当前Selection的位置,拿到当前是否存在「整体性Span」,如果是「整体性Span」,那么在删除时则整体移除即可。

    2K30

    Vim命令使用说明

    实际上:browse可以跟任何编辑文档的命令,sp等。...到达标记,可以用Ctrl+o返回原来的位置。 Ctrl+o和Ctrl+i 很像浏览器上的 后退 和 前进 。 m{a-z}: 标记光标所在位置,局部标记,只用于当前文件。...这在插入分割线时非常有用,30i+就插入了36个+组成的分割线。...I: 在当前行第一个非空字符前插入; gI: 在当前行第一列插入; a: 在光标插入; A: 在当前行最后插入; o: 在下面新建一行插入; O: 在上面新建一行插入; :r filename在当前位置插入另一个文件的内容...command可以将其它shell命令的输出插入当前文档 改写插入 c[n]w: 改写光标1(n)个词。 c[n]l: 改写光标n个字母。 c[n]h: 改写光标前n个字母。

    2.6K10

    linux(五)之vi编译器

    vi file1 如果file1文件不存在,将建立此文件;该文件存在,则将其拷贝到一个临时缓冲区。光标定位在该缓冲区第1行第1列的位置上。  ...vi +N file1(N:为数字) 如果file1文件不存在,将建立此文件;该文件存在,则将其拷贝到一个临时缓冲区。光标定位在文件第N行第1列的位置上。...vi +/string file1 如果file1文件不存在将建立此文件;该文件存在则将其拷贝到一个临时缓冲区。光标定位在文件中第一次出现字符串string的行首位置。  ...3.2、插入文本 3.2.1、添加       输入a,在光标的右边插入文本 输入A,在一行的结尾处添加文本  3.2.2、插入     通过在命令模式下输入i,在光标的左边插入文本 通过在命令模式下输入...I,在行首插入文本 3.2.3、插入行     输入o,在当前光标位置下面打开一行 输入O,在当前光标位置上面打开一行 3.3、撤销更改 撤消前一个命令:在最后一个命令之后立即输入u来撤消该命令

    3K80

    【Linux】深入理解awk命令

    ,然后你得意洋洋地等待面试官的下一轮提问,然而,面试官却在沉默片刻突然问道:那你知道如何在vim中进行查找、替换、复制、粘贴吗?此时,你是不是愣住了,心想:咋还有这玩意呢,没听说过啊?...比如,比如在Vim的命令模式下,按下"x"键会删除光标所在处的字符;而在插入模式下,按下"x"键会在光标位置插入字符"x"。 今天,我们将重点学习Vim的四种主要模式。...这三种插入方式有所不同: i:在光标所在位置插入输入的字符 a:在光标所在位置的下一个字符处插入输入的字符 o:在光标所在行的下一行插入行,光标位于行首 当我们进入插入模式,可以看到左下角的状态...此时,光标所在行文本块将被高亮显示,表示已选择。接着,将光标移动到要复制文本的结束位置,按下y键进行复制。这时,vim会自动将光标定位到选中文本的起始位置,并退出可视模式。...最后,将光标移动到要粘贴的位置,按下p键进行粘贴操作。 当然,也可以使用小写字母v进行多行复制操作。唯一不同的是,按下v进入可视模式,需要按下回车键或向下键才能使文本高亮显示。

    13310

    前端富文本基础及实现

    Selection 对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区,可能横跨多个元素。文本选区由用户拖拽鼠标经过文字而产生。...光标示例(起始位置是同一个位置的选区) 如图:anchorNode 与 focusNode 为同一节点 ("ZOO" 文本节点),anchorOffset 与 focusOffset 指向节点同一处,通过此信息可得到光标位置...想删除插入,可获取的 Selection 对象,利用此时位置所在 dom 元素的方法插入对应的文字、元素。...) const selection = window.getSelection() // 删除选取的起始位置就是插入位置,由 anchorNode 及 anchorOffset 确定...标签, insertImage 在光标位置插入图片 图片的 URL 链接 insertParagraph 在光标位置插入元素 null italic 切换选中文本的斜体样式 null styleWithCSS

    4.4K50

    人生苦短,何不用vim装13

    使用gd定位到当前变量的声明位置。 使用%快速定位到配对字符,括号的另一半。 最后可以使用回到光标上一次的位置。 编辑文本 d指delete,是所有修改操作的基础。 删除一个字符。...x相当于dl,删除当前光标下的字符。 删除特定单词。daw表示delete a word,删除当前光标下的单词,使用dw/db从当前位置删除到一个/前一个单词。 删除括号里的文本。...di(表示delete in (但是不会删除括号,使用da(会删除括号及括号内的文本。同理,di{删除花括号等等。 D表示删除本行内目前光标文本。 使用dd删除整行文本。...将上述操作中的d更换为c,表示,删除之后进入Insert模式。 y指yank,复制,将上述操作中的d更换为y,表示复制内容 使用r加特定字符,代替原来光标位置的字符。a使用rb文本变为b。...输入:使用gi定焦到第一个可输入文本位置。 元素定位器:使用f打开元素定位器,在当前页面打开,使用F在标签页打开。 刷新页面:使用r刷新页面。 gf选择下一个frame。

    3.7K11

    在 Visual Studio Code 中添加自定义的代码片段

    本文介绍如何在 Visual Studio Code 中添加自定义代码片段。...body 你可以使用 1 2 来作为按下 Tab 时将切换的键盘焦点区域,0 是插入完成最终光标所在的位置。...光标停留点(Tabstop) 使用 1 2 这些可以作为按下 Tab 键时的光标停留位置,而 占位符 ${1:占位符 Id} 可以表示一个占位符。...在 Visual Studio Code 中,你有这些变量可以使用: -TM_SELECTED_TEXT - 在插入代码片段的时刻选中的文本 -TM_CURRENT_LINE - 在插入代码片段的时刻光标所在的行...-TM_CURRENT_WORD - 在插入代码片段的时刻光标所在的词 -TM_LINE_INDEX - 在插入代码片段的时刻的行号(0 为首行) -TM_LINE_NUMBER - 当前文档的总行数

    92530
    领券