微信小程序 textarea输入框内文字，从中间删除快的时候，光标会从中间跳到最后位置

最新推荐文章于 2025-09-26 09:06:37 发布

原创

最新推荐文章于 2025-09-26 09:06:37 发布 · 2.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序

在微信小程序中，当textarea输入框含有大量文字并快速删除时，光标可能跳至末尾。这是因为bindinput事件更新数据导致的。解决方法是将输入框绑定的值和事件处理中改变的值分开，避免bindinput触发时更新输入框的value，从而保持光标位置。在清除数据时需同时清空两个变量。

场景： 微信小程序真机中 textarea输入框内有很多文字，从中间删除文字，速度快的时候，光标会从中间跳到最后位置！
原因：　input、textarea事件中,给input框绑定任何事件后，在处理事件时更新数据 setData之后就会让光标到最后。说白了就是数据发生更新导致光标跑到最后。

处理办法：
将标签中:value绑定的变量，与bindinput事件里一直改变赋予的值变量分开，用两个变量使用，这样就避免了bindinput触发时不去同时更新输入框中:value绑定的值，这样就不会让光标变到最后。

相关代码详情如下：

<textarea name="bindTextAreaBlur" placeholder-style="color: #888888;line-height: 42rpx;" placeholder="描述你想象的文字" bindinput="getInputWay"

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小雍雍

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

uniapp - 手动设置 input / textare 输入框焦点并将光标移到末尾，也支持 uview 组件库 u-input 输入框 / u-textarea 文本域（全平台兼容的通用解决方案）

🏆 前端领域优质创作者

07-21

7758

uniapp小程序h5网页安卓苹果app设置input输入框textare多行输入框的焦点，uniapp设置输入框input焦点，uniapp手动实现让input文本框聚焦，uniapp如何让输入框input手动聚焦，uni-app输入框手动设置焦点，input手动获取焦点，uniappinput自动聚焦，uniapp每次手动让input输入框获取焦点，uniapp自动获取焦点并将光标移到末尾，uniapp给textarea多行文本框设置获取焦点，uniapp获取输入框焦点后怎么把光标移到最后，unia

微信小程序开发摘要记录

janeen-jn的博客

04-12

1836

前言一直都在使用typora做笔记存本地内容多了有点卡现在移到博客来内容是学习时简单记录不免有错误的见解望赐教并见谅哦小程序的启动过程下载小程序包---启动小程序---加载解析app.json---注册App() 接下来一边执行App的生命周期一边根据app.json中pages的配置加载自定义的组件代码接着按顺序加载解析对应page的page.json 渲染page.wxml 注册page.js中的Page() 执行Page的生命周期全局App.js 生命周期 onLaunc

1 条评论您还未登录，请先登录后发表或查看评论

微信小程序input、textarea快速删除时光标会跳到最后

梁雨季™的博客

12-30

2137

问题描述：快速删除textarea输入框中间的文字，但删除过程中，光标就会自动跳到最后去，苹果机和安卓机都这样原因：input用了bindinput监听？，在开发工具中有时输入中文都困难。 1.节点 <textarea placeholder="请输入资料、描述等" maxlength="200" value="{{args.desc}}" bindinput="userInput" id='args.des'> </textarea> <view cl

Uniapp 输入框错位问题全面解决方案：告别光标漂移和页面跳动

最新发布

热爱编码，享受创造

09-26

1047

Uniapp 输入框错位问题解决方案核心问题 Uniapp 开发中常见输入框错位问题，包括光标漂移、页面跳动和键盘遮挡等现象，主要源于 Uniapp 渲染机制和平台差异。

H5移动端开发输入框光标总会跳到末尾问题

weixin_43756315的博客

07-17

2432

程序猿的疑惑有这样一个简单的需求：用户充值话费，在输入框里输入手机号。但是就是这样一个简单的需求确有一个烦人的bug，当点击手机号中间任意位置执行删除时光标会自动跳转到末尾位置，用户体验极差。光标位置的控制解决这个问题需要用到光标位置的控制HTMLInputElement.setSelectionRange() 使用方法： element.setSelectionRange(selectionStart, selectionEnd [, selectionDirection]); selectio

输入框连续删除，光标闪烁问题

shiyibushiwei的博客

09-09

1053

输入框连续删除，光标闪烁问题

小程序textarea输入框输删除内容光标错位问题

yangbo1993的博客

11-13

1164

问题原因：在mpvue 或 uinapp 中对 textarea 使用了 v-model。其本质原因是因为 v-model 会被mpvue 或 unapt 编译为原生的 bindinput 事件，然后在bindinput 中 setData textarea的 value 以及会有其他的一些处理逻辑, 频繁的设置导致了这个问题。解决方案：不使用 v-model，使用原生的 bindinput 事件来做处理逻辑，在 mpvue 中可以使用官方提到的 v-model.lazy。

微信小程序 清空textarea

07-25

- *1* [微信小程序 textarea输入框内文字，从中间删除快的时候，光标会从中间跳到最后位置](https://blog.youkuaiyun.com/yongyafang123/article/details/128835911)[target="_blank" data-report-click={"spm":"1018.2226...

由于好多微信用户的昵称是emoil图标，微信小程序中怎么做一个判断限制，防止在输入框内输入图标？

07-21

但是这样会导致光标跳到末尾，所以我们可以使用cursor对象来记录光标位置，并在设置值后恢复光标位置（微信小程序支持设置光标位置）。另一种做法：如果检测到有emoji，则阻止本次输入（通过返回被过滤的字符串...

小程序光标跳到末尾

04-02

比如，当用户在输入框中输入内容时，尤其是在动态更新输入框内容的情况下，光标可能会自动跳到末尾，导致用户无法在中间插入或修改内容。这种情况通常发生在数据绑定更新时，框架重新渲染组件，导致光标位置被重置。...

微信小程序输入框光标从中间删除跳到最后bug解决

weixin_45145119的博客

02-25

3557

原因：双向绑定导致数据发生更新导致光标跑到最后。 1.使用textarea标签， 2.将双向绑定v-model改为:value绑定数据 3.重新定义一个变量，在input事件里面把e.detail.value复制给这个变量 4.在提交的时候把重新定义的变量赋值给:value绑定的变量 5.清空时把这两个变量都清空 ......

taro3 微信小程序input输入框从中间删除文字时光标乱跳到结尾

hanchengmei的博客

04-27

641

问题描述：微信小程序真机不管是taroui的AtInput还是原生的Input, 在输入一段文字后，从中间删除文字，光标会乱跳到结尾，支付宝小程序没有这个问题。

mpvue v-html标签消失,【微信小程序】基于 Mpvue 的微信小程序input 和 textarea光标自动跑到最后问题...

weixin_36299790的博客

06-07

469

问题在 Mpvue 小程序中，在 input 或 textarea 标签中，使用 v-model 绑定数据时，当要修改里面的数据时(比如快速打几个字或者删除一段话中间的几个字)，光标会自动回到段落的尾部。解决使用lazy修饰符，即 v-model.lazy 进行数据绑定在进行数据传输或调用接口，或者提交的时候，做一个延时，使用setTimeout大概延时个100毫秒分析使用lazy修饰符有个缺点，...

iostextarea获取焦点_iOS上textarea删除内容时光标移位问题

weixin_39830387的博客

01-14

533

现象：输入一串文字，再删除内容，当内容完全删除之后，光标不在初始位置(左上侧)，而是前面有个空的占位，这个时候placeholder已经显示出来。再点击软键盘上的回退键，可以向前回退一下。如下图：图片发自简书App前提：这个textarea中有做计数的判断(判断已经输入多少文字)，而且会更新右下角的数字。定位过程比较苦闷，上网查了一些类似问题，有提到是某些position样式影响到光标位置、有提到...

微信小程序-textarea中的文本读取以及换行问题

qq_44681288的博客

08-27

4094

今天客户那边要求textarea中输入的问题可以按回车键换行，而我使用的是bindinput获取值，但是呢bindinput 处理函数的返回值并不会反映到 textarea 上，按回车键导致点击换行符无法使文字换行。　　此时便换用form bindsubmit="formSubmit" 方式获取textarea值了，此种方式的好处是按回车键自动换行。并且在用户回车的地方会带...

React解决＜textarea＞绑定value后，修改＜textarea＞内容光标移动到最后的问题

m0_60353051的博客

05-13

922

在react项目中使用且value值使用双向数据绑定时，每次在内容中间进行编辑修改后，光标都会立即跳到文本最后，影响编辑体验！许多框架在实现的双向数据绑定时，数据内容发生变化后，光标会移动到最后一位（react/vue/uniapp/微信小程序开发等），简而言之就是：数据发生改变时光标自动移到内容最后，以跟踪数据！在react中可以通过使用defaultValue + 非state数据存储value值避免该问题。

input输入框修改后自动跳到最后一个字符

weixin_30563319的博客

10-13

778

<input class="m-form-control" onpaste="return false" placeholder="直播间名称" name="name" onkeyup="this.value=this.value.replace(/[^\u4e00-\u9fa5|\u0000-\u00ff|\u3002|\uFF1F|\uFF01|\uff0c|\u3001|\uff1...

微信小程序textarea在苹果手机的大Bug：无视padding的坑

本文主要讨论了微信小程序开发过程中遇到的一个严重问题——textarea组件在苹果手机上的大Bug。作者首先强调，这个Bug的重要性在于它可能直接影响用户体验，且只有实际在苹果手机上进行测试才能发现。在前一篇文章中...