开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

更新textarea值,但保持光标位置

更新textarea值，但保持光标位置是指在前端开发中，当需要更新textarea元素的值时，希望保持光标在原来的位置上不发生变化。

为了实现这个功能，可以按照以下步骤进行操作：

获取textarea元素的光标位置：使用JavaScript的selectionStart属性可以获取textarea元素中光标的起始位置。
更新textarea的值：根据需求，可以通过JavaScript代码获取新的textarea值，并将其赋给textarea元素的value属性。
设置textarea的光标位置：在更新textarea值之后，使用JavaScript的selectionStart和selectionEnd属性，将光标位置设置为之前获取的光标起始位置。

下面是一个示例代码，演示如何更新textarea的值并保持光标位置：

<!DOCTYPE html>
<html>
<head>
  <title>更新textarea值，保持光标位置</title>
</head>
<body>
  <textarea id="myTextarea" rows="4" cols="50">原始文本</textarea>
  <button onclick="updateTextarea()">更新textarea值</button>

  <script>
    function updateTextarea() {
      var textarea = document.getElementById("myTextarea");
      var startPos = textarea.selectionStart; // 获取光标起始位置
      var newValue = "更新后的文本"; // 获取新的textarea值

      textarea.value = newValue; // 更新textarea值

      textarea.selectionStart = startPos; // 设置光标起始位置
      textarea.selectionEnd = startPos; // 设置光标结束位置（保持光标位置不变）
    }
  </script>
</body>
</html>

在上述示例中，点击"更新textarea值"按钮后，textarea的值会被更新为"更新后的文本"，同时光标位置会保持在原来的位置上。

这个功能在需要动态更新textarea内容时非常有用，例如在聊天应用中，当有新消息到达时，可以使用这种方法将新消息添加到textarea中，并保持光标位置在用户输入的位置上。

腾讯云相关产品推荐：

云服务器（CVM）：提供弹性计算能力，满足各类业务需求。产品介绍链接
云数据库 MySQL 版（CDB）：提供高性能、可扩展的关系型数据库服务。产品介绍链接
云存储（COS）：提供安全、稳定、低成本的对象存储服务。产品介绍链接
人工智能开放平台（AI）：提供丰富的人工智能能力和服务，如语音识别、图像识别等。产品介绍链接
物联网通信（IoT）：提供全面的物联网解决方案，包括设备接入、数据管理等。产品介绍链接
腾讯会议：提供高清、流畅的在线会议服务，支持多媒体处理和音视频通信。产品介绍链接

请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求进行评估和决策。

相关搜索:js textarea光标位置光标在<textarea>中的位置如何在textarea中获得光标位置？在Textarea中的光标位置显示DIV Vim在滚动时保持光标位置 VSCode:向上/向下翻页，保持光标垂直位置如何在Javascript中将光标移动到textarea的最后位置？如何在插入新文本javascript后保持光标位置 UIViews的伸缩组，但保持其位置将光标位置保持在textView Swift的底线上 Javascript:更改输入值时设置光标位置如何保持更新变量的值？如何平移视图，但保持其原始起始位置后退按钮后重新加载页面，但保持滚动位置 setState更新值，但显示旧值 Monaco编辑器:更新插入文本上的光标位置如何在react应用中使用Jquery更新textarea值 SeekBar没有更新音乐正在播放，但seekBar保持空闲在SVG中水平翻转元素，但保持其原始位置是否可以在滚动时保持div位置不变，但使其与容器保持左对齐？

相关搜索:

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

有帮助

没帮助

相关·内容

微信小程序官方组件展示之表单组件textarea源码

以下将展示微信小程序之表单组件textarea源码官方组件能力，组件样式仅供参考，开发者可根据自身需求定义组件样式，具体属性参数详见小程序开发文档。

02

codemirror自定义代码提示_96图文编辑器

写这个的目的是因为之前项目里用到过 CodeMirror，觉得作为一款在线代码编辑器还是不错，也看到过有些网站用到过在线代码编辑，当然我不知道他们是用什么做的，这里我把公司项目里用到的那部分抽出来，单独写篇博客，并把抽出来的那部分代码提交到 GitHub 去

02

使用 CodeMirror 打造属于自己的在线代码编辑器

写这个的目的是因为之前项目里用到过 CodeMirror，觉得作为一款在线代码编辑器还是不错，也看到过有些网站用到过在线代码编辑，当然我不知道他们是用什么做的，这里我把公司项目里用到的那部分抽出来，单独写篇博客，并把抽出来的那部分代码提交到 GitHub 去（地址），以防日后可能会再次用到（没准毕业设计里可能用的到）。

00

HarmonyOS-UIAbitity-TextArea——【坚果派-红目香薰】

TextArea(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextAreaController})

01

JavaScript 中获取光标位置

DOM中并没有直接获取光标位置的方法，那么我们只能间接来获取光标位置。DOM支持获取光标选中的范围，我们可以以此为切入点，来获取或定位光标的位置，当选取范围起始点和结束点一样时，就是光标插入的位置。

02

React源码中如何实现受控组件

在onChange中会更新num，num作为value prop传递给<input/>，达到value受控的目的。

04

微信小程序开发实战（9）：单行输入和多行输入组件

input组件用于录入单行文本，尽管input的基本功能是文本录入，但该组件的属性还是比较多的，也比较复杂。下面是input属性的属性及其含义。

02

textarea的中文输入判断与搜狗输入法的特殊行为

虽然要讲解的知识点是通用的，但是还是要介绍下我的应用场景和测试环境。 0.1 应用场景和测试环境我的应用是一块使用Html Canvas开发的黑板，在黑板上实现简单的文字编辑功能。操作系统：win

Flex开发常遇问题

Flex的一些零碎知识点，我是个flex初学者，很多知识点可能很幼稚，但是都是我学习和开发过程中遇到的问题。

01

造一个 react-contenteditable 轮子

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

02

document.activeElement

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

02

【Java 进阶篇】JQuery 案例：qq表情选择，表达情感的小黄脸

在我们的数字交流时代，表情符号已成为表达情感的重要方式之一。为了丰富用户的输入体验，qq表情选择功能应运而生。通过巧妙运用 JQuery，我们可以在页面中实现一个生动活泼的表情选择框，让用户轻松表达各种情感。本篇博客将深入探讨 JQuery 中实现qq表情选择的方法和实际应用，为你揭开这个小黄脸的神秘面纱。

04

Ace在线代码编辑器使用「建议收藏」

这边文章https://blog.csdn.net/liuxiao723846/article/details/106732401 介绍了Ace的使用，本文围绕Ace的api深入介绍其具体功能。

06

41个Web开发者都收藏的实用代码

在文件的根目录放进去这个图片，后缀修改成ico就可以了 6.可以在收藏夹中显示出你的图标

03

Note丨记41条Web程序员日常使用的代码！

几条常用代码,西顾在此分享下。 1. 将彻底屏蔽鼠标右键 oncontextmenu="window.event.returnValue=false"

no

可用于 Table 2. 取消选取、防止复制 <body onselectstart="return false"> 3.JS不允许粘贴 onpaste="return false" 4. JS防止复制 oncopy="return fa

08

41个Web开发者都收藏的实用代码

1. 将彻底屏蔽鼠标右键 oncontextmenu="window.event.returnValue=false"

no

可用于 Table 2. 取消选取、防止复制 <body onselectstart="return false"> 3.JS不允许粘贴 onpaste="return false" 4. JS防止复制

03

41个Web开发者都收藏的实用代码

将彻底屏蔽鼠标右键 oncontextmenu="window.event.returnValue=false"

no

可用于 Table 取消选取、防止复制 <body onselectstart="return false"> JS不允许粘贴 onpaste="return false" JS防止复制 oncopy="return false;" oncut="return false;" I

03

说说小程序中textarea的坑

有很多用户都给我家小程序客服反馈，说是页面无法输入内容，集中在微信6.6.7版本，之前的微信版本都正常。

03

总结收藏的41个JavaScript实用技巧

在文件的根目录放进去这个图片，后缀修改成ico就可以了 6. 可以在收藏夹中显示出你的图标

01

如何用canvas实现一个富文本编辑器

富文本编辑器相信大家都用过，相关的开源项目也很多，虽然具体的实现不一样，但是大部分都是使用DOM实现的，但其实还有一种实现方式，那就是使用HTML5的canvas，本文会带大家使用canvas简单实现一个类似Word的富文本编辑器，话不多说，开始吧。

04

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

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

可编辑DIV设置光标位置

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

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

04

HTML入门

概述 HTML 教程 | 菜鸟教程 (runoob.com) 骨架标签 📷 📷 HTML常用标签 HTML常用标签可分为一下几类：排版标签、图片标签、超链接标签、表格标签、列表标签、表单标签标题标签标题标签一共有6个，h1~h6, h1是─级标题，最大;h6是六级标题，最小 align align是标题的重要属性，能够决定标题中文字的显示位置

标题标签一共有6个

align属性可以设置文本对齐方式

align有三个可选值：left、center、right<
04

高速上云/网络穿透/视频上云网关EasyNTS组网服务平台如何通过复制穿透结果实现外网到内网的访问？

EasyNTS是网络穿透组网设备，由于外网不能直接访问内网，所以如果EasyNTS穿透的是内网下服务web端口，可以直接把穿透结果复制粘贴到网页，将内网ip和端口传出来得到穿透结果，通过穿透结果就可以实现外网访问内网。但是我们的研发支持人员在进行此项设置的时候，发现复制的穿透结果并没有复制成功。

04

移动端Webapp中的那些Bug

持续更新… 测试浏览器 Chrome: 61.0.3163.73 Safari: 10.0（IOS 10.3.3） Github: webapp-bugs 1. IOS overflow: scrol

05

两万字：讲述微信小程序之组件

6.cover-image目前原生组件均已支持同层渲染，建议使用 image 替代

02

如何使用小程序表单组件

上一篇文章中，我们给大家介绍了小程序的视图容器及基础内容组件，该组件主要应用是输出内容。接下来这篇文章中，我们将继续介绍小程序最常用的表单组件，该组件主要应用是获取输入内容。表单组件分为11个组件，我们将对这11个组件使用做详细的介绍。

04

从零开始，开发一个 Web Office 套件（10）：捕获键盘事件，输入文字

为了实现键盘输入，我们需要在container div元素（canvas父元素）中插入一个input（或者textarea）元素，作为代理，来捕获键盘相关事件。

03

使用 JS 剪贴板 API

使用 JS 剪贴板 API 现在的状况一般情况下我们会在网页上使用大量的3复制粘贴的操作。但是也可以看到在 360文库中的禁止复制粘贴或者知乎的那样复制粘贴的时候会自动带有一段文字的版权声明。 C

02

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

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

02

css设置input/textarea的光标

01

软件测试|超好用超简单的Python GUI库——tkinter（六）

之前我们介绍了entry控件，entry控件实际上更适用于输入用户名，密码等单行的文本，如果需要多行输入，tkinter提供了更便于多行文本输入的text控件。

02

TextRange之插入表情

SNS类或是微博类的产品一般都有一个功能：插入表情，如下所示：重点：兼容IE与其它主流的浏览器，根据上一次选择的选区范围进行操作。自己写了一个TextRange（参考了网上的一些例子和代码） /

02

javascript入门笔记5-事件

1.继续循环continue; continue的作用是仅仅跳过本次循环，而整个循环体继续执行。语句结构：

03

基于handsome主题的一些美化修改

之前看过一个彩色标签云的插件，这里用js为标签随机添加上预先定义的颜色，每次刷新都会进行换色：

02

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

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

01

KindEditor的简单使用

KindEditor 是一套开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript 编写，可以无缝地与 Java、.NET、PHP、ASP 等程序集成，比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。

03

造一个 copy-to-clipboard 轮子

用 JS 来复制文本在网页应用里十分常见，比如 github 里复制 remote 地址的功能：

03

Form表单问题多多（中）

HTML5学堂 - 刘国利：在上一篇的博文当中，主要讲解了表单的嵌套规则与书写习惯。在本篇博文当中，我主要就具体的样式实现进行一下讲解，并提一下表单相关的浏览器兼容问题。今天主要提到的标签有；label、文本框和密码框input、文本域。本文最早的版本也是在2013年8月时书写的，随着行业的变化，针对本篇文章也进行了内容的调整，调整时间2015年08月05日。本篇博文当中主要内容 1、label的作用 2、如何处理input文本框|密码框的样式 3、多行文本域textarea样式的处理 label的作用

05

Javascript中最常用的55个经典技巧(转)

1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键

no

可用于Table 2. <body onselectstart="return false"> 取消选取、防止复制 3. onpaste="return false" 不准粘贴 4. oncopy="return false;" oncut="return fal

02

手把手带你10分钟手撸一个简易的Markdown编辑器

最近我在项目中需要实现一个 markdown编辑器的需求，并且是以React框架为开发基础的，类似掘金这样的：

01

手把手带你10分钟手撸一个简易的Markdown编辑器

最近我在项目中需要实现一个 markdown编辑器的需求，并且是以React框架为开发基础的，类似掘金这样的：

02

小程序textarea与弹窗

在小程序 textarea 组件上展示一个模态弹窗组件，会发现 textarea 中输入的文字内容，会直接穿透模态弹窗显示在最上面，而且还能点击输入文字。

01

小程序实战踩坑之B2B商城项目总结

如下图，原以为是微信的页面，不会影响到小程序，实际情况下是会触发返回的页面的onShow()的。

02

js获取div编辑框，textarea，input text的光标位置，兼容FF和IE

<h<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>js获取div编辑框，textarea，input text的光标位置，兼容FF和IE</title> <script src="http:

06

CSS笔记(17)

有时候我们会看到网页中盒子边边有一些小三角,这种小三角是可以直接用CSS写出来的.

01

在评论输入框中插入表情

最近在做一个后台管理系统，要求可以对前台用户的作品进行评论，而评论要可以输入表情，常规的文字输入框都是用的文本域textarea来做的，但这种输入框只能输入文字，没有办法输入表情图标，这个时候可编辑div就能起到作用了，那么如何在可编辑的div中插入表情呢？

01

HTML标签（二）

表格是用来显示数据的，那么列表就是用来布局的。列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。

01

GUI鼠标相关设置

DEFAULT_CURSOR 默认光标类型（如果没有定义光标，则获取该设置）。

03

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭