开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何将光标聚焦在ContentEditable结尾处的文本旁边？

要将光标聚焦在ContentEditable结尾处的文本旁边，可以使用以下方法：

获取ContentEditable元素的引用：可以通过getElementById()、querySelector()等方法获取到ContentEditable元素的引用。
将光标聚焦在结尾处：使用Selection对象将光标聚焦在结尾处。可以通过以下步骤实现：
- 创建一个Range对象：使用document.createRange()方法创建一个Range对象。
- 将Range对象的起始位置设置为ContentEditable元素的最后一个子节点：使用Range对象的setStart()和setEnd()方法将起始位置和结束位置都设置为ContentEditable元素的最后一个子节点。
- 创建一个Selection对象：使用window.getSelection()方法创建一个Selection对象。
- 将Selection对象的范围设置为刚创建的Range对象：使用Selection对象的addRange()方法将范围设置为刚创建的Range对象。
- 将光标聚焦在结尾处：使用Selection对象的collapseToEnd()方法将光标聚焦在结尾处。

下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>将光标聚焦在ContentEditable结尾处的文本旁边</title>
</head>
<body>
  <div id="contentEditable" contenteditable="true">这是一个ContentEditable元素。</div>

  <script>
    // 获取ContentEditable元素的引用
    var contentEditable = document.getElementById('contentEditable');

    // 将光标聚焦在结尾处
    function focusCursorAtEnd() {
      // 创建一个Range对象
      var range = document.createRange();
      // 将Range对象的起始位置设置为ContentEditable元素的最后一个子节点
      range.setStart(contentEditable.lastChild, contentEditable.lastChild.length);
      range.setEnd(contentEditable.lastChild, contentEditable.lastChild.length);
      // 创建一个Selection对象
      var selection = window.getSelection();
      // 将Selection对象的范围设置为刚创建的Range对象
      selection.removeAllRanges();
      selection.addRange(range);
      // 将光标聚焦在结尾处
      selection.collapseToEnd();
    }

    // 调用函数将光标聚焦在结尾处
    focusCursorAtEnd();
  </script>
</body>
</html>

这样，当页面加载完成后，光标就会自动聚焦在ContentEditable结尾处的文本旁边。

腾讯云相关产品和产品介绍链接地址：

腾讯云主页：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iothub
移动推送服务（信鸽）：https://cloud.tencent.com/product/tpns
云存储（COS）：https://cloud.tencent.com/product/cos
腾讯区块链服务（TBCS）：https://cloud.tencent.com/product/tbcs
腾讯元宇宙（Tencent Metaverse）：https://cloud.tencent.com/solution/metaverse

相关搜索:Bootstrap Modal:无法在框旁边对齐我的文本 c#如何将光标设置在插入文本之前的末尾为ContentEditable=为“true”的元素在溢出时向左滚动文本在ionic中定位按钮文本旁边的图标在React中的光标位置插入文本在Summernote JQuery中的光标位置追加文本在文本区域旁边显示异常的行号在文本旁边对齐字体强大的图标在颤动中显示文本旁边的图像如何使文本输入居中对齐，但光标在聚焦时左对齐？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

初探富文本之富文本概述

富文本编辑器通常指的是可以对文字、图片等进行编辑的产品，具有所见即所得的能力。对于Input、Textarea之类标签，他们是支持内容编辑的，但并不支持带格式的文本或者是图片的插入等功能，所以对于这类的需求就需要富文本编辑器来实现。现在的富文本编辑器也已经不仅限于文字和图片，还包括视频、表格、代码块、思维导图、附件、公式、格式刷等等比较复杂的功能。

01

linux（五）之vi编译器

前面介绍了linux的常用命令和对文本的操作，接下来我将对大家领略一下vi编译器的强大功能。希望大家觉得写的还不错的话可以点个“推荐”哦！一、vim/vi编译器简介 Vim/Vi是一个功能强大的全

08

【linux命令讲解大全】078.“joe: 强大的纯文本编辑器“

01

职场人必备的WORD排版十大技巧

1.页面设置快速进行调整问：要对 Word 进行页面调整，通常大家采用的方法是选择“文件→页面设置”选项的方法进行，请问有没有更快速方便的方法呢？答：有，如果要进行“页面设置”，只需用鼠标

07

Linux vi的使用

经常使用的三种基本模式：命令模式(Command Mode)，输入模式(Input Mode)，末行模式(Last Line Mode)，其他的9种模式不做介绍，很少会使用。

01

editplus快捷键大全之editplus光标快捷键

前面我们讲了editplus快捷键大全之editplus文件快捷键，现在我们介绍一下editplus快捷键大全之editplus光标快捷键移动光标到上一个制表符Shift+Tab 移动光标到上一个制表符的位置左移一个字符 Left 光标向左移动一个字符选区向左扩展一个字符 Shift+Left 将选定区域向左扩展一个字符右移一个字符 Right 光标向右移动一个字符选区向右扩展一个字符 Shift+Right 将选定区域向右扩展一个字符文件结尾 Ctrl+End 移动到文档结尾处选区扩展到文档结尾处 Ctrl+Shift+End 将选定区域扩展到文档结尾处文件开始 Ctrl+Home 移动到文档开始处选区扩展到文档开始处 Ctrl+Shift+Home 将选定区域扩展到文档开始处下移 Down 光标下移一行选区扩展到下一行 Shift+Down 将选定区域扩展到下一行移动光标到行末 End 移动光标到当前行行末选区扩展到当前行行末 Shift+End 将选定区域扩展到当前行行末移动光标到行首 Home 移动光标到当前行行首选区扩展到当前行行首 Shift+Home 将选定区域扩展到当前行行首上移 Up 光标上移一行选区扩展到上一行 Shift+Up 将选定区域扩展到上一行光标下移一页 Page Down 光标下移一页选区扩展到下一页 Shift+Page Down 将选定区域扩展到下一页光标上移一页 Page Up 光标上移一页选区扩展到上一页 Shift+Page Up 将选定区域扩展到上一页向下滚动 Ctrl+Down 向下滚动一行向上滚动 Ctrl+Up 向上滚动一行光标移动到屏幕底部 Ctrl+Page Down 光标移动到当前屏幕底部选区扩展到屏幕底部 Ctrl+Shift+Page Down 将选定区域扩展到当前屏幕底部光标移动到屏幕顶部 Ctrl+Page Up 光标移动到当前屏幕顶部选区扩展到屏幕顶部 Ctrl+Shift+Page Up 将选定区域扩展到当前屏幕顶部移动到上一个单词 Ctrl+Left 移动到上一个单词选区扩展到上一个单词 Ctrl+Shift+Left 将选定区域扩展到上一个单词移动到下一个单词 Ctrl+Right 移动到下一个单词选区扩展到下一个单词 Ctrl+Shift+Right 将选定区域扩展到下一个单词

03

[Linux] VIM的使用

VIM是一款功能强大、高度可定制的文本编辑工具。可以使用命令apt install vim（Ubuntu环境，在安装有apt工具的情况下）安装，相比起vi来说，vim做的一些变化

01

Emacs 快捷键

replace-regexp 和 query-replace-regexp 函数的工作方式是类似的，但是它们使用正则表达式作为要进行替换的字符串。

02

手把手教你实现网页端社交应用中的@人功能：技术原理、代码示例等

本文由ELab团队技术团队分享，原题“Twitter和微博都在用的 @ 人的功能是如何设计与实现的？”，有修订。

01

vim 从嫌弃到依赖(17)——查找模式

最开始介绍vim的时候，提到vim有普通模式、插入模式、可视模式和命令行模式，并且已经对这几个模式做了详细的介绍了。除了这几个模式以外，vim还有一个非常强大的模式——查找模式，为什么最开始没有将其列举出来呢，这是因为我很少看到有教程将它与前面介绍的模式并列作为一个新的模式。但是在日常使用中，我又习惯将它叫做查找模式。我在这里就不深究这些了，请读者自行判断。

02

Vim学习笔记上篇

在普通模式中，用的编辑器命令，比如移动光标，删除文本等等。这也是Vim启动后的默认模式。这正好和许多新用户期待的操作方式相反（大多数编辑器默认模式为插入模式）。 Vim强大的编辑能来自于其普通模式命令。普通模式命令往往需要一个操作符结尾。例如普通模式命令dd删除当前行，但是第一个”d”的后面可以跟另外的移动命令来代替第二个d，比如用移动到下一行的”j”键就可以删除当前行和下一行。另外还可以指定命令重复次数，2dd（重复dd两次），和dj的效果是一样的。用户学习了各种各样的文本间移动／跳转的命令和其他的普通模式的编辑命令，并且能够灵活组合使用的话，能够比那些没有模式的编辑器更加高效地进行文本编辑。在普通模式中，有很多方法可以进入插入模式。比较普通的方式是按a（append／追加）键或者i（insert／插入）键。

03

bash下常用快捷键

Ctrl-A 相当于HOME键，用于将光标定位到本行最前面 Ctrl-E 相当于End键，即将光标移动到本行末尾 Ctrl-B 相当于左箭头键，用于将光标向左移动一格 Ctrl-F 相当于右箭头键，用于将光标向右移动一格 Ctrl-D 相当于Del键，即删除光标所在处的字符 Ctrl-K 用于删除从光标处开始到结尾处的所有字符 Ctrl-L 清屏，相当于clear命令 Ctrl-U 用于删除从光标开始到行首的所有字符。一般在密码或命令输入错误时常用 Ctrl-W 用于删除当前光标左侧的一个单词

01

VI中的多行删除与复制

VI中的多行删除与复制法一：单行删除，：1（待删除行）d 多行删除，：1,10d 法二：光标所在行，dd 光标所在行以下的N行，Ndd 方法1：光标放到第6行，输入：2yy 光标放到第9行，输入：p 此方法适合复制少量行文本的情况，复制第6行（包括）下面的2行数据，放到第9行下面。方法2：命令行模式下输入 6,9 co 12 复制第6行到第9行之间的内容到第12行后面。方法3：有时候不想费劲看多少行或复制大量行时，可以使用标签来替代光标移到起始行，输入ma 光标移到结束行，输入mb

01

document.activeElement

IE:document.activeElement可获得所有聚焦的元素，包括input、textarea、div等。IE只关心光标聚焦的位置，不关心聚焦元素的性质。

02

ssh的时候我最常用的6个快捷键

ctrl+U：删除行首至光标所在处的所有内容 ctrl+K：删除光标所在处至行尾的所有内容

04

Vim高手，从来不用鼠标

“平时不可缺少的会用到vim，但是避免不了鼠标，事实上，省略鼠标是完全可以的，没有想像中那么难，看我短短几行带大家一起省略鼠标。——编程三分钟”

01

Vim从理解到应用

1991 年，来自荷兰的一名工程师 Bram Moolenaar 为了在他的Amiga计算机上复制Vi的功能，正式发布了Vim的第一个版本。在当时无论谁也没想到，这款软件未来能在技术圈爆发出那么大的威力，为千千万万的工程师节省了无数时间，大幅提升他们的开发效率。

02

Liunx命令行：vi详解

进入vi的命令 vi filename :打开或新建文件，并将光标置于第一行首 vi +n filename ：打开文件，并将光标置于第n行首 vi + filename ：打开文件，并将光标置于最后一行首 vi +/pattern filename：打开文件，并将光标置于第一个与pattern匹配的串处 vi -r filename ：在上次正用vi编辑时发生系统崩溃，恢复filename vi filename….filename ：打开多个文件，依次进行编辑

01

linux下vi命令大全

进入vi的命令 vi filename :打开或新建文件，并将光标置于第一行首 vi +n filename ：打开文件，并将光标置于第n行首 vi + filename ：打开文件，并将光标置于最后一行首 vi +/pattern filename：打开文件，并将光标置于第一个与pattern匹配的串处 vi -r filename ：在上次正用vi编辑时发生系统崩溃，恢复filename vi filename….filename ：打开多个文件，依次进行编辑

03

前端富文本基础及实现

在日常生活中我们会经常接触到各种各样的文档格式和形式，其中富文本在文档格式中扮演了重要角色。对于前端而言，富文本产品也层出不穷，其应用也越来越广。

05

Vim快速入门

从vi演生出来的Vim具有多种模式，这种独特的设计容易使初学者产生混淆。几乎所有的编辑器都会有插入和执行命令两种模式，并且大多数的编辑器使用了与Vim截然不同的方式：命令目录（鼠标或者键盘驱动），组合键（通常通过control键（CTRL）和alt键（ALT）组成）或者鼠标输入。Vim和vi一样，仅仅通过键盘来在这些模式之中切换。这就使得Vim可以不用进行菜单或者鼠标操作，并且最小化组合键的操作。对文字录入员或者程序员可以大大增强速度和效率。

07

有了这 27 个Linux 技巧，让你工作效率翻倍！

今天给大家分享 27 个实用的 Linux 技巧，对于一些经常在 Linux 操作系统下玩的重度爱好者，可以有效的提高你的工作效率。

01

Linux tail命令：显示文件结尾的内容

tail 命令和 head 命令正好相反，它用来查看文件末尾的数据，其基本格式如下：

09

日常记录（2）vim操作查询手册

退出vim 按键功能 :wq 保存退出 :w filename 保存到指定文件 :q 退出，如果文件修改但没有保存，会提示无法退出 :q! 退出，不保存进入插入模式按键功能 a 光标位置右边插入文字 i 光标位置当前处插入文字 o 光标位置下方开启新行 O 光标位置上方开启新行 I 光标所在行首插入文字 A 光标所在行尾插入文字进入可视化模式按键功能 Ctrl+v 进入可视化编辑模式其它按键功能 :set expandtab tab展开为空格 cc/S 清除整行，进入插入模式 d$

02

08-高级键盘技巧

省事（即用最少的击键次数执行最多的任务）是命令行最希望达到的目标之一。命令行的另一目标是：用户在执行任务时手指无需离开键盘，不使用鼠标。接下来让我们认识下令键盘使用得更快、更高效的 bash 功能。本章将使用到以下命令： clear: 清屏。 history: 显示历史列表的记录。一、编辑命令行 bash 使用了一个名为 Readline 的库（供不同的应用程序共享使用的线程集合）来实现命令行的编辑。在之前也曾提到过相关的内容，比如：通过箭头键移动光标。除此之外，bash还有很多其它功能，

04

大大提高你的工作效率的Linux 技巧

如果此时使用ctrl + u快捷键，那么该条命令都会被清除，而不需要长按backspace键。

06

用Rust和React创建一个富文本编辑器

在Fiberplane，我们最近遇到了一个有趣的挑战：我们正在使用的富文本编辑器库已经过时了。我们曾经使用Slate.js——一个很好的编辑器——但是当我们为协作编辑实现我们自己的富文本基元时，我们发现我们自己的基元和Slate的数据模型之间的脱节是一个阻碍因素。所以我们开始思考——如果我们建立自己的富文本编辑器（RTE, Rich Text Editor）会怎样？

linux的vi命令详解_useradd命令详解

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。 Jetbrains全系列IDE使用 1年只要46元售后保障童叟无欺

01

这些linux技巧大大提高你的工作效率

linux中的一些小技巧可以大大提高你的工作效率，本文就细数那些提高效率或者简单却有效的linux技巧。

02

centos 清除root密码

通过光标上下键选中kernel xxx那一行，再按键盘的e键，出现下图界面。在结尾处添加single

03

这些linux技巧大大提高你的工作效率

linux中的一些小技巧可以大大提高你的工作效率，本文就细数那些提高效率或者简单却有效的linux技巧。

03

Vim编辑器基础入门

Vim(Visual Interface|可视化接口),在linux中常常使用的工具，是进行Linux嵌入式编程的必备工具之一; vim最大的贡献就是它的按键系统这也是为什么chrome、idea、atom等编辑器都会提供一个vim mode;

02

可编辑DIV设置光标位置

平时我们使用文本框input, textarea时，我们有时候需要得到光标的位置或者说设置光标的位置. 但是文本框有个不足，就是不能满足我们插入图片或者其他的一些要求. 所以有时候我们使用div来代替文本框. 今天为了搞定设置DI的光标位置.头疼啊，终于可以了，记录一下，网上资料不多. 首先要让DIV启用编辑模式.

通过设定contenteditable=true开启div的编辑模式.这样DIV就可以跟文本框一样输入

04

IntelliJ IDEA常用快捷键汇总

转载自https://blog.csdn.net/wei83523408/article/details/60472168

02

Linux 之 Vim 编辑器从基础到大成使用

Vim(Visual Interface|可视化接口),在linux中常常使用的工具，是进行Linux嵌入式编程的必备工具之一; vim最大的贡献就是它的按键系统这也是为什么chrome、idea、atom等编辑器都会提供一个vim mode;

01

IJ快捷键

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/153661.html原文链接：https://javaforall.cn

01

[oeasy]python0006_指法标准_键盘正位_你好世界_hello_world_单引号_双引号

01

Linux中Xshell常用快捷键

linux xshell常用快捷键 tab #自动补全 ctrl + insert #复制 shift + insert #粘贴删除 ctrl + d #删除光标所在位置上的字符相当于VIM里x或者dl ctrl + h #删除光标所在位置前的字符相当于VIM里hx或者dh ctrl + k #删除光标后面所有字符相当于VIM里d shift+$ ctrl + u #删除光标前面所有字符相当于VIM里d shift+^ ctrl

01

Vim 快速使用指南

vim启动进入普通模式，处于插入模式或命令行模式时只需要按Esc或者Ctrl+[(这在vim课程环境中不管用)即可进入普通模式。普通模式中按i（插入）或a（附加）键都可以进入插入模式，普通模式中按:进入命令行模式。命令行模式中输入wq回车后保存并退出vim。

03

在可编辑div中定位光标和设置光标

当我们去点击一个输入框的时候，就会产生一个选中对象 selection，就是我们可以看到的文字变成蓝色的那个区域，selection在火狐浏览器可以直接用 window.getSelection()获取，在HTML里面，selection只有一个的，并且selection是一个区域，你可以想象成一个长方形，它是有开始和结束的。

02

Linux编辑器——vim 原

然后按'i' 进入编辑模式，再粘贴已经复制的代码内容，这样就不会自动缩进了。有时候，这样的方法不好用，可以尝试这种：

01

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

作者：InfinityTomorrow 授权转载链接：https://juejin.cn/post/6982251438332182542 一、前言最近接手了一个需求，在评论框中实现 @At通知用户的功能。这个可以说是我的知识盲点了，但是其实很多应用都有这类功能了，例如：QQ空间、微博搜索、企业微信的TAPD...但是一看就不想不做～😭(产品经理ps：为什么别人可以做你不可以做？) 明确目标 📷 二、技术方案分析在寻求我们的技术方案的时候、我们首先要明确我们想要的功能是什么你知道自己想要什么，知道要

02

【富文本】268- 富文本原理了解一下？

缘起最近产品想让我在富文本里加个旋转图片的功能，我一想?，就觉得事情并不简单，因为印象中好像没见过这种操作。果然，经过一番百度之后，确实没怎么看到相关信息，这也就意味着要自己动手丰衣足食了?。但我自

04

java中stringBuilder常用方法[通俗易懂]

String对象是不可改变的。每次使用 System.String类中的方法之一时，都要在内存中创建一个新的字符串对象，这就需要为该新对象分配新的空间。在需要对字符串执行重复修改的情况下，与创建新的 String对象相关的系统开销可能会非常昂贵。如果要修改字符串而不创建新的对象，则可以使用System.Text.StringBuilder类。例如，当在一个循环中将许多字符串连接在一起时，使用 StringBuilder类可以提升性能。

01

生信学习零基础DAY1

腾讯云笔记可以直接使用Enter换行，其他可以使用结尾处两个或多个空格换行，或者采用HTML添加在结尾处换行

04

造一个 react-contenteditable 轮子

前言以前在知乎看到一篇关于《一行代理可以做什么？》的回答： 📷 当时试了一下确实很好玩，于是每次都可以在妹子面前秀一波操作，在他们惊叹的目光中，我心里开心地笑了——嗯，又让一个不懂技术的人发现到了程序的美🐶，咳咳。一直以来，我都觉得这个属性只是为了存在而存在的，然而在今天接到的需求之后，我发现这个感觉没什么用的属性竟然完美地解决了我的需求。一个需求需求很简单，在输入框里添加按钮就好了。这种功能一般用于邮件群发，这里的按钮“姓名”其实就是一个变量，后端应该要自动填充真实用户的姓名，然后再把邮件发给

02

Linux 挂在硬盘步骤

Disk /dev/xvdb doesn't contain a valid partition table

03

最新最全自己动手做一个富文本编辑器(附源码 api)

我就佩服我这个钻研精神,涉及到前端的东西,什么东西我都能给你扯上一段.在工作咸鱼之际,也绝不放过自己,一颗奔腾的心永远保持着对技术的热爱与追求. 中华文化上下五年前,二近代文明的信息化却不是从中国诞生的,我真是深表遗憾.恨自己生不逢时.没有创造出A语言,碾压C语言,没有第一个创造计算机......啊,不知不觉扯远了.

02

【Web技术】421- 富文本原理介绍

缘起最近产品想让我在富文本里加个旋转图片的功能，我一想?，就觉得事情并不简单，因为印象中好像没见过这种操作。果然，经过一番百度之后，确实没怎么看到相关信息，这也就意味着要自己动手丰衣足食了?。但我自

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭