微信小程序中，ios系统下，用户总是遇到 在输入密码或验证码的输入框中输入，光标总是往最前面跑，可以设置cursor解决

已于 2025-03-17 09:28:29 修改
阅读量267 收藏
点赞数 1
文章标签： ios 前端 react.js
于 2025-03-17 09:28:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43517190/article/details/146307121
版权 
const cursor = -1;
<Input
  placeholder="短信验证码"
  maxlength={6}
  onInput={this.onInputCode}
  className={innerClassNames.codeBoxInput}
  cursor={cursor}
></Input>
蓉妹妹
关注
如何在微信小程序中实现具有@功能的输入框
flying meng的菜鸟居
03-08 1683
本文代码来源于笔者开源的组件库中的 atinput 组件。组件支持@功能，直接引入，方便开发。欢迎star！
【微信小程序】10分钟学会微信小程序textarea多行输入框组件，你还在等什么？
java专栏
11-27 1323
通过以上详细的介绍，相信你已经对微信小程序中的textarea多行输入框组件有了全面的了解。textarea组件虽然看似简单，但功能强大，能够帮助开发者实现丰富的输入功能和良好的用户体验。只要你掌握了这些基础知识和技巧，就能轻松应对各种开发任务。希望你能轻松掌握这些技能，成为微信小程序开发的高手！🌟🚀下次见，祝你开发愉快！👋🎉。
uniapp 小程序 textarea 层级穿透，聚焦光标位置错误怎么办？
weixin_47077674的博客
01-13 1540
在开发微信小程序时，使用textarea组件可能会遇到一些棘手的问题。层级穿透：由于textarea是原生组件，任何元素都无法遮盖住它。当其他元素与textarea重叠时，就会出现层级穿透的问题。特别是在弹窗中使用textarea时，如果弹窗有动画效果，textarea会在动画执行期间显示在页面右上角，导致视觉效果非常差。如果等到动画结束后再显示textarea，又会出现突然弹出的效果，影响用户体验。光标位置不正确：在 iOS 设备上，textarea的光标默认会出现在文本的最前面。
解决 input[type=number] 输入中文时光标跳到左上角的问题
m0_56168677的博客
11-14 497
解决 input[type=number] 输入中文时光标跳到左上角的问题
微信小程序输入框光标从中间删除跳到最后bug解决
weixin_45145119的博客
02-25 3320
原因：双向绑定导致数据发生更新导致光标跑到最后。 1.使用textarea标签， 2.将双向绑定v-model改为:value绑定数据 3.重新定义一个变量，在input事件里面把e.detail.value复制给这个变量 4.在提交的时候把重新定义的变量赋值给:value绑定的变量 5.清空时把这两个变量都清空 ......
input组件使用type=“number“的时候，光标自动跳到首位
最新发布
weixin_41422591的博客
05-19 229
小程序中，type="digit" 专门用于输入数字（如手机号），相比 type="number"，它更适合处理纯数字输入，且不会触发小数点等额外键盘功能，能减少光标异常。小程序开发过程中，不管是taro还是uniapp，使用input组件时都可能发生下面的情况。问题描述：input组件使用type="number"的时候，光标自动跳到首位。解决办法：将 type="number" 改为 type="digit"
移动端 input控件，调数字键盘，在输入小数点时光标会自动跳到小数点前面，请问怎么解决？
qq_37916164的博客
06-06 2899
判断客户端是安卓还是ios 如果是安卓就用 如果是ios就使用
ios微信小程序中 input 输入框问题，输入的光标中的内容自动清空
FE-阿阳的博客
12-18 6697
ios微信小程序中 input 输入框问题，输入的光标中的内容自动清空 问题描述 1.我在页面上有个倒计时的功能，每一秒都在更新时间，更新时间显示的值（view一直变） 2.我调用input输入框，准备输入内容，每次倒计时秒数变得时候，光标的内容自动全部清空 具体场景描述请见下图： 解决方案 这个问题是 mpvue 处理定时器和 input 输入框在ios上的兼容问题；问题连接附上： git...
【学一点儿前端】iOS微信小程序在密码input框中使用系统保存的密码后，密码v-model绑定值不更新的问题
fangyuan__的博客
06-24 1426
这让iOS用户在微信小程序进行登录的时候，可以把当前账号密码保存进系统密码箱，之后再次登录时，输入账号后点击密码框，系统自带的键盘有密码箱的选项，选择密码箱的密码后，密码框正常显示密码，但是点击登录按钮后提示“请输入密码”。因为iOS在页面中只有第一个密码框会提示保存密码和使用密码箱，那我们可以通过在密码框上多加一个用户看不到的密码框，骗过iOS系统，以阻止真正的密码框的保存密码功能，从源头解决问题。成功骗过iOS，输入账号后点击密码框不提示使用密码箱密码，并且输入密码后失焦也不提示保存密码了。
ios-仿微信支付密码的方块输入框.zip
07-11
在这一背景下，一个名为"ios-仿微信支付密码的方块输入框.zip"的项目映入我们的眼帘。这个项目基于GitHub上的开源组件SYBoxTextField，旨在提供一个既安全又直观的密码输入方式，仿照的是广为人知的微信支付密码输入...
微信小程序input组件键盘遮住问题（或者modal里面的input遮住）
echo_Ae的博客
09-09 1876
微信小程序已经帮我们解决了，只需要在input里面添加cursor-spacing属性即可 <input cursor-spacing="200" type="text" />
微信小程序中键盘弹起输入框自动跳到键盘上方处理
w15635748705的博客
08-12 4967
键盘未弹起时。
微信小程序开发初学：输入框 - input
2501_90425225的博客
01-30 736
设置键盘右下角按钮的文字，仅在 type=“text” 时生效。最大输入长度，设置为 -1 的时候不限制最大长度。默认值：input-placeholder。是否为密码类型（输入内容显示为圆点）confirm-type属性的合法值。：输入身份证（弹出身份证输入键盘）placeholder的 样式类。：输入数字（弹出数字键盘）type属性的合法值。类型：boolean。类型：boolean。类型：boolean。指定光标与键盘的距离。
在Taro框架、小程序环境中遇到的列表输入抖动问题及解决方法记录
有关我的科研的足迹、算法竞赛的日子、生活记录。
11-21 2173
在Taro框架、小程序环境中遇到的列表输入问题及解决方法记录 〇、问题介绍 import {View, Image, Button} from '@tarojs/components' import { AtImagePicker, AtInput } from 'taro-ui' import Taro from '@tarojs/taro' import {useEffect, useState} from 'react' import request from '@/utils/request' im
支付宝小程序input 输入框在 iOS 客户端的光标漂移问题
weixin_44705979的博客
07-04 584
解决方案：步骤一：若已在 input 中设置了 enableNative 属性，删除 enableNative 属性的全部设置。步骤二：在 app.json 文件 window 对象内，设置 “enableInPageRenderInput”:“YES”。问题描述：IOS16输入框出现光标漂移问题。
微信小程序中input控件自动聚焦、软键盘的关闭和打开
热门推荐
huangmeimao的专栏
07-26 8万+
input控件除了获取和显示用户输入的语句，很重要的一个功能是聚焦和键盘使用，下面就相关属性做详细地介绍： cursor-spacing:   类型：Number 指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离auto-focus:true 类型：Boolean 自动聚焦，拉起键盘
微信小程序输入框与软键盘的距离 cursor-spacing
qq_40113688的博客
05-21 2314
<input cursor-spacing="100" />
ios微信小程序 input 存在值 focus 点击后光标在最前面
10-09
在iOS微信小程序中，当你使用`input`组件并且这个输入框已经有内容并聚焦时，点击输入区域会使得光标跳转到文本的开始位置。这是设计上的一种默认行为，目的是让用户方便地编辑已有的输入内容，而不是清空后从头开始输入。 如果你希望改变这种行为，比如在已有内容的情况下焦点直接定位到最后面，可以尝试设置`auto-focus`属性为`false`，然后在用户点击输入框后手动触发聚焦事件，并将焦点设置到末尾。这通常通过JavaScript操作实现，例如： ```javascript Page({ data: { value: '', }, bindFocus: function(e) { if (this.data.value) { this.setData({ selected: this.data.value.length - 1, }); } wx.inputSelectRange({ range: { start: this.data.selected, end: this.data.selected }, element: e.detail.target, }); }, }) ``` 在这个例子中，`bindFocus`函数会在输入框获取焦点时被调用，如果已有内容，则设置光标到最后。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值