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

已于 2022-08-10 11:31:19 修改
阅读量2.4k 收藏 2
点赞数
文章标签： 微信小程序 小程序 uni-app vue
于 2022-02-25 10:15:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45145119/article/details/123126881
版权

原因：双向绑定导致数据发生更新导致光标跑到最后。
1.使用textarea标签，
2.将双向绑定v-model改为:value绑定数据
在这里插入图片描述

3.重新定义一个变量，在input事件里面把e.detail.value复制给这个变量
在这里插入图片描述

4.在提交的时候把重新定义的变量赋值给:value绑定的变量
5.清空时把这两个变量都清空
在这里插入图片描述

双向绑定导致数据发生更新导致光标跑到最后
双向绑定导致数据发生更新导致光标跑到最后
双向绑定导致数据发生更新导致光标跑到最后

双向绑定导致数据发生更新导致光标跑到最后
双向绑定导致数据发生更新导致光标跑到最后
双向绑定导致数据发生更新导致光标跑到最后
双向绑定导致数据发生更新导致光标跑到最后
双向绑定导致数据发生更新导致光标跑到最后
双向绑定导致数据发生更新导致光标跑到最后
双向绑定导致数据发生更新导致光标跑到最后
双向绑定导致数据发生更新导致光标跑到最后

Sarduhr-.-
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现获取焦点后光标在字符串后
12-01
主要介绍了js实现获取焦点后光标在字符串后，原理就是获得焦点后重新把自己复制粘帖一下，喜欢的朋友可以看看   代码如下: var t=$(“#”+id).val(); $(“#”+id).val(“”).focus().val(t); //其原理就是获得焦点后重新把自己复制粘帖一下
微信小程序-输入框输入文字后，将光标移到文字中间，接着输入文字后光标又自动跳到最后...
weixin_34414196的博客
07-06 5326
问题描述： 　　input输入框输入一段文字后，将光标移到文字中间，接着输入文字后光标又自动跳到最后去了。 原因： 　　input事件中,给input框绑定任何事件后，在处理事件时 setData之后就会让光标到最后。说白了就是数据发生更新导致光标跑到最后。 <input bindinput="sendText" confirm-type="send" value='{{...
input光标总是在内容最末端
Justicky
01-08 6216
前端在优化用户体验的时候，经常会遇到这样的需求： 当input框有值的时候，用户再去编辑这个input，无论用户点input的什么位置，总是将光标置于input已有内容的最末端。 下例是基于vue框架的写法： &lt;input type="text" @click="focusEnd('name-inp-hook')" class="name-inp" id="name-inp-hook...
input对象获得焦点后自动把光标移到内容最后
weixin_30794851的博客
07-28 852
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后 jquery获取焦点后光标在字符串后,当input获得焦点后，自动把光标移到文本内容的最后,jQuery用focus()使文本输入框获得焦点且焦点在文字的最右的方法 //获取焦点后光标在字符串后 //其原理就是获得焦点后重新把自己复制粘帖一下 var t=$("#"+id).val(); $("#"+...
H5移动端开发输入框光标总会跳到末尾问题
weixin_43756315的博客
07-17 2111
程序猿的疑惑 有这样一个简单的需求：用户充值话费，在输入框里输入手机号。 但是就是这样一个简单的需求确有一个烦人的bug，当点击手机号中间任意位置执行删除时光标会自动跳转到末尾位置，用户体验极差。 光标位置的控制 解决这个问题需要用到光标位置的控制HTMLInputElement.setSelectionRange() 使用方法： element.setSelectionRange(selectionStart, selectionEnd [, selectionDirection]); selectio
微信小程序 textarea输入框内文字，从中间删除快的时候，光标会从中间跳到最后位置
yongyafang123的博客
02-01 1736
小程序 输入框 删除光标问题
Input输入框光标在前输入后自动跳到最后面的bug
weixin_48092226的博客
07-13 2718
组件库：tea-component技术框架：umi、react、react-hook-form今日bug，输入框光标在最前面输入后自动跳到了最后面 输入前 输入后触发事件不同，其余条件完全相同情况下 此bug发生的原因猜测，tea-component组件对onChange组件进行了一次封装 ，而没有对onInput封装导致具体原因欢迎大家指点解决方法：将onChange事件改成onInput...
input输入框修改后自动跳到最后一个字符
weixin_30563319的博客
10-13 593
<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...
input，textarea，使用repalce方法后，在输入框中输入文字后光标自动跳至文尾
hyq_07_27的博客
04-13 952
input，textarea，使用repalce方法后，在输入框中输入文字后光标自动跳至文尾 解决方法：光标重定位 <textarea rows="4" cols="20" id="txtArea1" onkeyup="if (event.keyCode == 32) inputNumberOnly(this)"></textarea> function ge...
微信小程序picker组件下拉框选择input输入框的实例
01-03
微信小程序picker组件下拉框选择input输入框的实例 实现效果图： 页面 预约项目 <text>{{casArray[casIndex]}} </view
微信小程序 - 弹出键盘遮挡住输入框解决方案
03-29
在开发微信小程序的时候遇到，输入用户名或者手机号以及地址，手机键盘调起来，会把输入框遮挡。 如图： (此图片来源于网络，如有侵权，请联系删除! ) (此图片来源于网络，如有侵权，请联系删除! ) 以上两张图是自己...
详解小程序输入框闪烁及重影BUG解决方案
12-09
在小程序input组件中，如果使用v-model进行双向绑定，在输入时会出现光标闪烁的BUG。 原因 造成这个BUG的原因，是因为在原生小程序input组件上，进行了封装。才导致光标闪烁的问题。 解决方案 这里提供了两种解决...
微信小程序 input输入框详解及简单实例
08-31
主要介绍了微信小程序 input输入框详解及简单实例的相关资料,需要的朋友可以参考下
微信小程序input、textarea快速删除时光标会跳到最后
梁雨季™的博客
12-30 1601
问题描述：快速删除textarea输入框中间的文字，但删除过程中，光标就会自动跳到最后去，苹果机和安卓机都这样 原因：input用了bindinput监听？，在开发工具中有时输入中文都困难。 1.节点 <textarea placeholder="请输入资料、描述等" maxlength="200" value="{{args.desc}}" bindinput="userInput" id='args.des'> </textarea> <view cl
Vue自动获取焦点并且光标移至最后
Mr.小灰狼_随笔
08-20 2976
Vue自动获取焦点并且光标移至最后 项目需求 ： 每次进入页面时，需要自动聚焦到一个文本框上，让其右侧的设置面板显现出来。 并且光标最好是自动移至到最后面，优化用户的体验。 代码实现 ：
uniapp小程序，部分 ios 真机测试出现 input 输入框内容 跳动 问题
叶子的博客
05-29 2670
uniapp小程序，部分 ios 真机测试出现，input输入框内容 跳动 等问题
input光标位置设置至行末端
Shuanger112的博客
08-15 7380
最近接到了一个很尬的需求.. 这个需求是这样的… 再点击input框的时候光标要始终保持在内容的行末端 emm.. 废话少说，直接上代码！ Js： end: function (item) { var obj = document.getElementsByClassName(item)[0] obj.focus(); var len = obj.value.len...
微信小程序输入框正则表达式
最新发布
06-06
微信小程序的输入框可以使用 `input` 组件或 `textarea` 组件，可以通过设置 `bindinput` 事件监听用户输入的内容。在 `bindinput` 事件中，可以通过正则表达式对输入的内容进行校验。以下是一个示例代码： ``` <view class="container"> <input type="text" placeholder="请输入手机号" bindinput="onInput" /> </view> Page({ onInput: function (e) { // 手机号正则表达式 const reg = /^1[3|4|5|7|8][0-9]\d{8}$/; const value = e.detail.value; if (!reg.test(value)) { wx.showToast({ title: '请输入正确的手机号', icon: 'none' }); } } }) ``` 在上面的代码中，我们使用了一个正则表达式 `/^1[3|4|5|7|8][0-9]\d{8}$/` 来校验手机号。这个正则表达式可以匹配以 1 开头、第二位为 3、4、5、7、8 中的任意一个、后面跟着 9 位数字的字符串，也就是符合中国大陆手机号的格式。如果用户输入的内容不符合这个格式，就会弹出提示框提示用户输入正确的手机号。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值