解决微信小程序 输入框获取焦点光标偏移

最新推荐文章于 2023-11-13 21:30:31 发布
最新推荐文章于 2023-11-13 21:30:31 发布
阅读量2.7k 收藏 2
点赞数 1
分类专栏： 微信小程序开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z2181745/article/details/119146819
版权

如题：页面滚动后，点击输入框获取焦点，光标位置发生偏移

解决方法：将页面元素整体放在<scroll-view></scroll-view>标签里 ，给<scroll-view设置固定高度解决了

Julie_GO
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序ios和安卓键盘 textarea每次输入超过一行或者换行时textarea位置会往上偏移
qq_44550566的博客
03-18 1583
微信小程序ios和安卓键盘 textarea每次输入超过一行或者换行时textarea位置会往上偏移 第一次尝试使用 cursor-spacing解决 微信小程序使用 textarea ，ios 和 安卓 手机 ，键盘会挡住输入框。使用了 cursor-spacing 属性， 指定光标与键盘的距离。取textarea距离底部的距离和cursor-spacing指定的距离的最小值作为光标与键盘的距离 。 在ios上，键盘不遮挡输入框。**但是在安卓手机上， cursor-spacing 指定之后，每次输入
微信小程序input组件改变初始光标与placeholder的位置
lifeiyang313的博客
09-08 1448
最后使用padding-left：10rpx；实现了需求，不过记得使用box-sizing:border-box，否则整体样式会发生改变。最近在使用微信小程序input组件时，由于设置了input的样式如下，导致初始光标看着不协调，想把光标向右挪动一点。看了网上的方法使用text-indent:10rpx，发现光标位置未改变，只改变了placeholder的位置。
ios11，弹出层内的input框光标错位 键盘弹出时，输入信息，光标一直乱跳
weixin_30236595的博客
01-23 847
　　之前开发了一个微信项目，维护期中苹果手机突然出现光标错位现象，经过排查，发现是最新的ios11系统的锅。 　　具体情况：弹出层使用position: fixed；弹出层内附带input/textarea输入框，ios11系统的苹果机用户在点击输入框，出现键盘后，弹出层被顶上去，而光标还停留在原处，即出现错位情况。 　　解决思路： 解决光标错位：弹出层设置为posi...
华为手机 微信小程序 input输入框上移
bo_gu的博客
01-09 2265
不知道大家有木有遇到过 微信小程序的input 调起输入法的时候 会被挤上去 输入框跑到上面去了 无论css怎么写怎么布局 还是会跑上移 尤其是测试mm的华为手机 别的手机都OK的。比方说我这里要获取用户昵称 就可以这样。但是只写到这里 还是会有一个上移的动作。解决的方法是 给input加个。看出来了咩 这里需要把。
微信小程序input搜索框，placeholder的位置和光标的位置
热门推荐
weixin_37787294的博客
08-02 1万+
如图： 光标的位置直接在input下设置 input{ width: 100%; height: 60rpx; background-color: white; font-size: 24rpx; text-align: center;//光标居中 } “搜索“两字的位置有两种方式： 1.placeholder-class //wxml <inp...
微信开发者工具模拟器input点击偏移问题解决方法：
舜岳的博客
05-11 1319
微信开发者工具模拟器input点击偏移问题解决方法： 原因： 由于win10系统显示设置了 缩放布局125% 将其改成100%即可 1.在桌面右击鼠标：点击显示设置 2.更改显示缩放布局： 不用谢我，因为事后你会改回来的！ 好了拜~ ...
微信小程序如何获取用户收货地址
01-03
获取用户收货地址需要用户点击授权，所以有两种情况...4.取消过收货地址授权，调用wx.openSetting（），调起客户端小程序设置界面让用户去打开授权 4.1：用户当前设置包含收货地址授权但是用户点击取消授权，调用wx.ope
微信小程序 实例汇总 完整项目源代码
11-01
微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要针对移动设备，尤其是智能手机。它允许开发者在微信内创建原生体验的应用程序，无需通过应用商店即可供用户使用。这个压缩包文件“wechat”很可能包含了...
微信小程序 input输入框详解及简单实例
11-28
微信小程序输入框input 相关文章： 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 ...
详解小程序输入框闪烁及重影BUG解决方案
12-09
在小程序input组件中，如果使用v-model进行双向绑定，在输入时会出现光标闪烁的BUG。 原因 造成这个BUG的原因，是因为在原生小程序input组件上，进行了封装。才导致光标闪烁的问题。 解决方案 这里提供了两种解决...
ios 最新版 12.1.x 在微信中 input等调起软键盘后页面按钮位置偏移问题，记录一下
南思琼海
03-13 1311
原文https://juejin.im/post/5c07442f51882528c4469769 这里直接给出解决方案 方案1 onBlur = (e) =&gt; { const { onBlur } = this.props; document.body &amp;&amp; (document.body.scrollTop = 0); onBlur &amp;&amp; onBlu...
小程序input获得焦点触发_微信小程序input失焦异常
weixin_39652136的博客
12-20 1945
1.问题描述初始打开页面，input框自动聚焦，在输入n位数字后自动触发事件进行业务处理，结果以页面底部弹框形式展示，同时input失焦。但目前问题是，底部弹框出现后，input再次获得焦点，导致键盘弹起，阻挡住底部弹框。只有在刚进入页面，第一次输入后会出现这个问题，保留在当前页面，第二次输入时一切正常。2.相应截图正常异常异常时输出3.代码片段{{ msg }}doSomething(e) {t...
小程序textarea输入框输删除内容光标错位问题
yangbo1993的博客
11-13 399
问题原因： 在mpvue 或 uinapp 中对 textarea 使用了 v-model。其本质原因是因为 v-model 会被mpvue 或 unapt 编译为原生的 bindinput 事件，然后在bindinput 中 setData textarea的 value 以及会有其他的一些处理逻辑, 频繁的设置导致了这个问题。解决方案： 不使用 v-model，使用原生的 bindinput 事件来做处理逻辑，在 mpvue 中可以使用官方提到的 v-model.lazy。
解决 微信小程序 input错位
gongzuoyongde的博客
12-16 4069
解决微信小程序的input组件位置错乱的问题
微信小程序|ios页面滚动时，input定位会错乱
qq_41555989的博客
01-06 2481
解决方法1（推荐）： 设置属性always-embed=true 解决方法2: 使用focus/blur事件手动控制input框focus
微信打开网页键盘弹起后页面上滑，导致弹框里的按钮响应区域错位 ... ...
yiyueqinghui的博客
12-11 1172
移动端微信打开网页, 键盘弹起后页面上滑，即使输入完成，页面不会自动恢复（页面仍然是上滑状态），导致弹框里的按钮响应区域错位，从而弹窗的按钮事件失效 问题出现的原因： 个别手机系统的问题，例如微信IOS 6.7.4版本 搭配 苹果IOS12版本就会有这种问题。 解决方法： 在input唤醒键盘输入后，在input上加入onBlur事件，input失去焦点后，让页面滚动到顶部（documen...
【taro】taro微信小程序input在苹果手机上光标聚焦不对的解决办法
我的开源项目:https://gitee.com/derekgo/vue-cms_xg
04-01 1646
问题原因 我打开我的安卓机测试taro的input标签，没问题~，但是我旁边的小组长打开他的buliangbuliang的苹果手机使用taro中的input，聚焦的时候，光标自动跑到最左边！！ 解决办法 俺查看了taro文档，发现了cursor的属性，添加之后，正常了~ 代码: //props是input框输入的值 <AtInput key={"1"} cursor={props.length} type="text"/> 欢迎加入前端全栈开发交流圈一起吹水聊天学习交流qq群:8370515
【scroll-view滑动条】遮挡内容解决方法，【输入框】输入内容顶起页面解决方法，【文本超出隐藏】
weixin_44899940的博客
06-29 1186
【scroll-view滑动条】遮挡内容解决方法，【输入框】输入内容顶起页面解决方法，【文本超出隐藏】
微信小程序输入框禁止输入
最新发布
06-12
在微信小程序中，如果你想阻止用户在特定的输入框内输入内容，可以通过设置`disabled`属性来实现。这个属性是一个布尔值，当设置为`true`时，输入框会变为灰色背景，且用户无法进行文本输入。 例如，在`wxml`（小...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值