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

最新推荐文章于 2024-06-27 10:20:38 发布

小雍雍

最新推荐文章于 2024-06-27 10:20:38 发布

阅读量1.9k

点赞数

分类专栏：微信小程序文章标签：微信小程序

本文链接：https://blog.csdn.net/yongyafang123/article/details/128835911

版权

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

摘要由CSDN通过智能技术生成

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

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

相关代码详情如下：

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

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小雍雍

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

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

梁雨季™的博客

12-30

1748

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

textarea光标定位在最后

08-28

textarea光标定位在最后，就是往textarea中赋值时候，光标自动移到最后。

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

解决微信小程序使用textarea输入框 type=“textarea“ 文本输入限制问题

最新发布

weixin_45776545的博客

06-27

651

【代码】解决微信小程序使用textarea输入框 type=“textarea“ 文本输入限制问题。

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

yangbo1993的博客

11-13

479

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

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

weixin_45145119的博客

02-25

2690

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

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

m0_60353051的博客

05-13

339

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

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

weixin_36299790的博客

06-07

378

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

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

weixin_39830387的博客

01-14

404

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

微信小程序 清空textarea

07-25

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

微信小程序开发手记之五：组件

王梵

04-18

9217

iconicon组件有3个属性，如下： type，可选值：success, success_no_circle, info, info_circle，warn, waiting, cancel, download, search, clear color，如#C9C9C9。 size，默认为23px。先看一张效果图：再看具体的wxml和wxss。<view class="demo-view

微信小程序_文档_06_组件_视图容器_基础内容_导航

pre_eminent的JAVA学习园地

06-02

1471

基础组件框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。什么是组件：组件是视图层的基本组成单元。组件自带一些功能与微信风格的样式。一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之内。<tagname property="value"> Content goes here ... </tagname> 注意：所有组件...

小程序组件

浪子四方

04-12

2271

目录 1 基础组件 text rich-text nodes icon progress 2 视图组件 cover-image cover-view mavable-area movable-view scroll-view swiper swiper-item view 3 表单组件 button checkbox checkbox-group form...

input，textarea，使用repalce方法后，在输入框中输入文字后光标自动跳至文尾

hyq_07_27的博客

04-13

1025

input，textarea，使用repalce方法后，在输入框中输入文字后光标自动跳至文尾解决方法：光标重定位 <textarea rows="4" cols="20" id="txtArea1" onkeyup="if (event.keyCode == 32) inputNumberOnly(this)"></textarea> function ge...

微信小程序-输入框输入文字后，将光标移到文字中间，接着输入文字后光标又自动跳到最后...

weixin_34414196的博客

07-06

5504

问题描述：　　input输入框输入一段文字后，将光标移到文字中间，接着输入文字后光标又自动跳到最后去了。原因：　　input事件中,给input框绑定任何事件后，在处理事件时 setData之后就会让光标到最后。说白了就是数据发生更新导致光标跑到最后。 <input bindinput="sendText" confirm-type="send" value='{{...

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

qq_44681288的博客

08-27

3776

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

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

shiyibushiwei的博客

09-09

876

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

ios微信小程序中 input 输入框问题，输入的光标中的内容自动清空

FE-阿阳的博客

12-18

6565

ios微信小程序中 input 输入框问题，输入的光标中的内容自动清空问题描述 1.我在页面上有个倒计时的功能，每一秒都在更新时间，更新时间显示的值（view一直变） 2.我调用input输入框，准备输入内容，每次倒计时秒数变得时候，光标的内容自动全部清空具体场景描述请见下图：解决方案这个问题是 mpvue 处理定时器和 input 输入框在ios上的兼容问题；问题连接附上： git...

微信小程序input组件抖动及textarea组件光标错位解决方案

wangchaoqi1985的博客

08-07

1476

微信小程序input组件抖动及textarea组件光标错位解决方案