uni-app input输入框聚焦后焦点错乱偏移

于 2022-01-07 00:03:36 发布
阅读量3k 收藏 4
点赞数 4
文章标签： css 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21609531/article/details/122355611
版权
在uni-app开发中遇到输入框(input)聚焦后焦点显示位置不正确的问题，表现为点击编辑时焦点偏离预期位置。解决方法是将所有input元素放入一个scroll-view组件内，并设置scroll-y属性为true，这能确保输入框在有滚动条的页面中定位准确。
摘要由CSDN通过智能技术生成

uni-app input输入框聚焦后焦点错乱偏移

在这里插入图片描述

如上图所示，本来应该在1那里，点击编辑以后，就跑到2那里去了
eg

解决办法

如果页面有滚动条，请将所有的 input 放在一个scroll-view中即可
实例代码
view
<scroll-view class="content" scroll-y="true" scroll-top=0 enable-back-to-top>
	<!-- 代码区 -->
</scroll-view>
CSS
.content {
	height: 100%;
	background-color: #F7F7F7;
}
紫琪软件工作室
关注
博客
node.js 环境变量配置（极简）
06-28 1801
node.js 环境变量、缓存、全局安装、镜像源、关闭ssl验证
博客
maven环境变量配置（极简）
06-28 256
maven环境变量配置（Windows11）
博客
Java环境变量配置（极简）
06-28 229
Java环境变量配置（Windows环境下）
博客
（uni-app）APISpace物流查询工具类
06-07 210
uni-app中使用APISpace查询物流信息
博客
Poi4 读取导入Excel文件数据，动态匹配表头索引、验证表头必要性
06-07 536
反射机制、动态匹配表头索引、验证表头必要性、返回失败记录信息、失败原因、泛型返回值、返回实体类内部自定义验证方法
博客
深度理解，自己实现java动态代理、自动注入、切面编程（类似于Spring IOC、AOP）
10-10 110
深度理解，自己实现java动态代理、自动注入、切面编程（类似于Spring IOC、AOP）
博客
html页面集成echars
03-10 273
【代码】html页面集成echars。
博客
springboot 2.4 附件访问路径配置、跨域配置
03-11 261
新建配置类DefaultWebConfig 实现接口WebMvcConfigurer参考如下import org.springframework.context.annotation.Configuration;import org.springframework.web.servlet.config.annotation.CorsRegistry;import org.springframework.web.servlet.config.annotation.ResourceHandlerRegi
博客
springboot 2.4 程序启动完成事件
03-11 3239
1、新建类DefaultApplicationRunner 实现接口ApplicationRunner中的run方法2、例如import cn.jjzqkj.base.config.SystemStaticParam;import cn.jjzqkj.wechat.miniapp.config.MiniAppConfig;import cn.jjzqkj.wechat.pubacc.config.PubAccConfig;import cn.jjzqkj.wechat.store.config.
博客
springboot全局异常处理类
03-11 670
注：BusinessException.class 为自定义异常类，替换为需要处理的异常信息类即可import lombok.extern.slf4j.Slf4j;import org.springframework.web.bind.annotation.ControllerAdvice;import org.springframework.web.bind.annotation.ExceptionHandler;import org.springframework.web.bind.annota
博客
springboot 2.4集成mybatis-plus
03-11 608
1、pom版本号引入<fastjson.version>1.2.62</fastjson.version><mybatis-plus.version>3.4.0</mybatis-plus.version>2、pom.xml引入<dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId&gt
博客
nps(Linux CentOs)搭建内网穿透
02-21 3194
1、下载软件包，下载地址：https://github.com/ehang-io/nps/releases，选择对应版本进行下载2、上传到服务器指定文件夹（随意即可），解压3、执行命令：./npc install4、根据安装目录找到配置文件所在5、配置文件参考appname = nps#Boot mode(dev|pro)runmode = pro#HTTP(S) proxy port, no startup if emptyhttp_proxy_ip=0.0.0.0http_prox
博客
uni-app 使用scroll-view实现页面列表滚动加载（简单实现）
01-12 1847
uni-app 使用scroll-view实现页面列表滚动加载（简单实现）
博客
uni-app 微信小程序登录（前端部分）
01-12 331
uni-app 微信小程序登录（前端部分）
博客
css 单行、多行，超出部分显示省略号
01-12 351
css 单行、多行，超出部分显示省略号
博客
uni-app 动态修改tabbar标题、图标
01-12 991
uni-app 动态修改tabbar标题、图标
博客
PoiExcel数据导入工具类（持续更新）
12-28 323
PoiExcel数据导入工具类（持续更新）
博客
spring boot 自定义参数配置，以微信公众号配置为例
12-28 543
spring boot 自定义参数配置，以微信公众号配置为例
博客
Layui自定义插件分享
09-27 566
/** * 自定义Layui自定义插件 * version: 1.2 * 基于layui-v2.5.7编写，整理常用方法，减少layui开发页面代码编写工作量 * 实现：1、自定义弹窗 * 2、自定义对话框弹出，按钮响应函数定义 * 3、自定义分页表格 * 4、自定义不分页表格 */const topDistance = 30;const createDialog = function (url, title, size, scale) { let closeBtn = 1
博客
uni-app小程序后端使用shiro登录session统一
03-29 1523
1、session统一问题1）spring boot项目/** * 重写web mvc 配置 * @author ZhangJi */@Configurationpublic class DefaultWebConfig implements WebMvcConfigurer { @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { /*
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值