uniapp 小程序 textarea 层级穿透,聚焦光标位置错误怎么办?

前言

在开发微信小程序时,使用 textarea 组件可能会遇到一些棘手的问题。最近我在使用 uniapp 开发微信小程序时,就遇到了两个非常令人头疼的问题:

  1. 层级穿透:由于 textarea 是原生组件,任何元素都无法遮盖住它。当其他元素与 textarea 重叠时,就会出现层级穿透的问题。特别是在弹窗中使用 textarea 时,如果弹窗有动画效果,textarea 会在动画执行期间显示在页面右上角,导致视觉效果非常差。如果等到动画结束后再显示 textarea,又会出现突然弹出的效果,影响用户体验。
  2. 光标位置不正确:在 iOS 设备上,textarea 的光标默认会出现在文本的最前面。当文本较长时,点击文本中间位置时光标仍然会出现在最前面,弹出键盘后很难重新定位到需要编辑的位置,使用体验非常糟糕。

为了解决这些问题,我尝试了多种方案,但效果都不尽如人意。最终,我发现可以使用 editor 富文本编辑器组件来替代 textarea,它不仅解决了上述问题,还提供了更多的自定义选项。

封装 Editor 组件

editor 富文本编辑器组件不仅可以实现多行文本输入,还能避免层级穿透和光标位置错误的问题,甚至可以自定义光标的颜色。

官方对 editor 组件的介绍如下:

富文本编辑器,可以对图片、文字格式进行编辑和混排。

既然 editor 是一个富文本编辑器,那么它自然可以处理带有格式的文本。我们可以通过降级使用,将其作为一个普通的文本输入框,输入和输出的内容都是纯文本。

我的实现代码如下:

<template><view class="relative"><!-- 编辑器区域 --><editor:id="editorId":model-value="htmlContent"class="w-full bg-gray-50/50 rounded-xl p-3 text-sm min-h-[120px] text-base":placeholder="placeholder || '请输入内容...'"@ready="onEditorReady"@input="handleInput":read-only="isReadOnly"/></view>
</template><script setup lang="ts">
import { EditorContext } from '@/types/global'
import nanoid from '@/utils/nanoid'const props = defineProps<{modelValue: stringplaceholder?: stringid?: string
}>()const emit = defineEmits<{(e: 'update:modelValue', value: string): void(e: 'blur'): void
}>()// 编辑器内部 HTML 内容
const htmlContent = ref(props.modelValue)
// 编辑器上下文
const editorCtx = ref<EditorContext | null>(null)
const isReadOnly = ref(true)// 生成唯一 id
const editorId = computed(() => props.id || `editor-${nanoid()}`)
const instance = getCurrentInstance()// 初始化编辑器
const onEditorReady = () => {uni.createSelectorQuery().in(instance).select(`#${editorId.value}`).context((res: any) => {editorCtx.value = res.context// 只设置初始内容,不自动聚焦if (editorCtx.value && props.modelValue) {editorCtx.value.setContents({ html: props.modelValue })}isReadOnly.value = false}).exec()
}// 处理输入
const handleInput = (e: any) => {// 保存 HTML 内容htmlContent.value = e.detail.html || ''// 向外发送纯文本emit('update:modelValue', e.detail.text || '')
}defineExpose({editorCtx,
})
</script><style scoped>
:deep([id^='editor']) {caret-color: rgb(99, 102, 241);
}
</style>

如果你有需要可以直接复制使用,作为组件引入。这里面有几个注意点我介绍一下:

  1. 默认的 readonlytrue ,在编辑器准备完成后修改为 true,这个逻辑是因为 setContent 设置内容时会自动聚焦,设置为 readonly: false 就不会触发自动聚焦了,如果你需要自动聚焦可以将这段逻辑移除掉。
  2. 默认暴露了 editorCtx 如果你想主动修改编辑器内容可以触发 editorCtx.setContent 去修改,而不是直接修改 modelValue,因为内部并没有监听 modelValue 的实时变化去修改编辑器,避免多处地方同时修改编辑器内容。
  3. :deep([id^='editor']) { caret-color: rgb(99, 102, 241); }:用于修改编辑器中光标颜色,因为我这里支持自定义 id ,所以匹配了所有 editor 前缀。

通过将 textarea 替换为 editor 后,你会发现效果都是一样的,而且在 ios 端的使用体验会好很多,手指点击哪里,光标的默认位置就在哪里,在效果如下图所示。

image.png

💡注意点editor 组件在 focus 时在 ios 设备上是不会获取到键盘高度的,因此如果你有工具栏放在键盘上的需求,在替换组件时需要慎重考虑。

总结

如果你想查看 editor 组件的实际效果,可以搜索学习卡盒小程序,在卡片页面长按编辑尝试一下,看看效果是否符合你的需求。希望这篇文章能帮助你解决遇到的问题。如果对你有帮助,欢迎点赞支持!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/68180.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

FLASK创建下载

html用a标签 <!-- Button to download the image --> <a href"{{ url_for(download_file, filenameimage.png) }}"><button>Download Image</button> </a> 后端&#xff1a;url_for双大括号即是用来插入变量到模板中的语法。也就是绑…

Kotlin 快速上手指南:从安装 IntelliJ IDEA 到编写第一个程序

文章目录 什么是kotlinIntelliJ IDEA安装 IntelliJ IDEA创建 Kotlin 项目运行 Kotlin 程序更改进入后默认打开上一次项目的设置打开 IntelliJ IDEA进入设置:重新启动 IntelliJ IDEA:快速学习Kotlin变量声明类型推断条件表达式定义函数单表达式函数when 表达式when 语句的基本…

Docker 部署 Typecho

1. 官网 https://typecho.org/插件 & 主题 https://github.com/typecho-fans/plugins https://typechx.com/ https://typecho.work/2. 通过 compose 文件安装 github官网&#xff1a; https://github.com/typecho/Dockerfile 新建一个目录&#xff0c;存放 typecho 的相…

2025/1/12 复习JS

我乞求你别再虚度光阴 ▶ 空心 --------------------------------------------------------------------------------------------------------------------------------- 摘自哔哩哔哩听课笔记。 01 上篇&#xff1a;核心语法 1.基于页面效果的操作 <!DOCTYPE html>…

【机器学习】主动学习-增加标签的操作方法-样本池采样(Pool-Based Sampling)

Pool-Based Sampling Pool-based sampling 是一种主动学习&#xff08;Active Learning&#xff09;方法&#xff0c;与流式选择性采样不同&#xff0c;它假设有一个预先定义的未标注样本池&#xff0c;算法从中选择最有价值的样本进行标注&#xff0c;以提升模型的性能。这种…

【初识扫盲】厚尾分布

厚尾分布&#xff08;Fat-tailed distribution&#xff09;是一种概率分布&#xff0c;其尾部比正态分布更“厚”&#xff0c;即尾部的概率密度更大&#xff0c;极端值出现的概率更高。 一、厚尾分布的特征 尾部概率大 在正态分布中&#xff0c;极端值&#xff08;如距离均值很…

机组存储系统

局部性 理论 程序执行&#xff0c;会不均匀访问主存&#xff0c;有些被频繁访问&#xff0c;有些很少被访问 时间局部性 被用到指令&#xff0c;不久可能又被用到 产生原因是大量循环操作 空间局部性 某个数据和指令被使用&#xff0c;附近数据也可能使用 主要原因是顺序存…

Transformer创新模型!Transformer+BO-SVR多变量回归预测,添加气泡图、散点密度图(Matlab)

Transformer创新模型&#xff01;TransformerBO-SVR多变量回归预测&#xff0c;添加气泡图、散点密度图&#xff08;Matlab&#xff09; 目录 Transformer创新模型&#xff01;TransformerBO-SVR多变量回归预测&#xff0c;添加气泡图、散点密度图&#xff08;Matlab&#xff0…

31_搭建Redis分片集群

Redis的主从复制模式和哨兵模式可以解决高可用、高并发读的问题。但是依然有两个问题没有解决:海量数据存储问题、高并发写的问题。由于数据量过大,单个master复制集难以承担,因此需要对多个复制集进行集群,形成水平扩展每个复制集只负责存储整个数据集的一部分,这就是Red…

c++ 中的容器 vector、deque 和 list 的区别

表格汇总&#xff1a; 容器存储结构随机访问性能中间插入/删除性能两端插入/删除性能内存管理特点迭代器类型适用场景vector连续存储的动态数组 O ( 1 ) O(1) O(1) O ( n ) O(n) O(n)&#xff08;需要移动元素&#xff09;末尾&#xff1a; O ( 1 ) O(1) O(1)&#xff0c;头部…

ASP.NET Core - 日志记录系统(二)

ASP.NET Core - 日志记录系统&#xff08;二&#xff09; 2.4 日志提供程序2.4.1 内置日志提供程序2.4.2 源码解析 本篇接着上一篇 ASP.NET Core - 日志记录系统(一) 往下讲&#xff0c;所以目录不是从 1 开始的。 2.4 日志提供程序 2.4.1 内置日志提供程序 ASP.NET Core 包括…

nginx的可视化配置工具nginxWebUI的使用

文章目录 1、nginx简介2、nginxWebUI2.1、技术解读2.2、开源版和专业版之间的区别2.3、功能解读 3、安装与使用3.1、下载镜像3.2、查看镜像3.3、启动容器3.4、使用 4、总结 1、nginx简介 Nginx 是一个高效的 HTTP 服务器和反向代理&#xff0c;它擅长处理静态资源、负载均衡和…

【C++】IO 流

文章目录 &#x1f449;C 语言的输入与输出&#x1f448;&#x1f449;流是什么&#x1f448;&#x1f449;C IO 流&#x1f448;C 标准 IO 流C 和 C 语言的输入格式问题C 的多次输入内置类型和自定义类型的转换日期的多次输入C 文件 IO 流文本文件和二进制文件的读写 &#x1…

JavaScript系列(25)--性能优化技术详解

JavaScript性能优化技术详解 ⚡ 今天&#xff0c;让我们深入探讨JavaScript的性能优化技术。掌握这些技术对于构建高性能的JavaScript应用至关重要。 性能优化基础 &#x1f31f; &#x1f4a1; 小知识&#xff1a;JavaScript性能优化涉及多个方面&#xff0c;包括代码执行效…

kotlin中的flow使用,Flow跟生命周期结合

kotlin的Flow可以连续异步发出多个数据。 1. 普通flow,冷流类似于一个函数&#xff0c;当开始收集时才开始运行 val coldStream flow {for (i in 1..5) {delay(100L)emit(i)}} val collect1 buildString {coldStream.collect { append(it).append(", ") } }.remo…

基于springboot的幼儿园管理系统系统

作者&#xff1a;学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等 文末获取“源码数据库万字文档PPT”&#xff0c;支持远程部署调试、运行安装。 项目包含&#xff1a; 完整源码数据库功能演示视频万字文档PPT 项目编码&#xff1…

Pycharm 使用教程

一、基本配置 1. 切换Python解释器 pycharm切换解释器版本 2. pycharm虚拟环境配置 虚拟环境的目的&#xff1a;创建适用于该项目的环境&#xff0c;与系统环境隔离&#xff0c;防止污染系统环境&#xff08;包括需要的库&#xff09;虚拟环境配置存放在项目根目录下的 ven…

docker mysql5.7如何设置不区分大小写

环境 docker部署&#xff0c;镜像是5.7&#xff0c;操作系统是centos 操作方式 mysql 配置文件是放在 /etc/mysql/mysql.conf.d/mysqld.cnf&#xff0c; vim /etc/mysql/mysql.conf.d/mysqld.cnf lower_case_table_names1 重启mysql容器 验证 SHOW VARIABLES LIKE low…

网站收录入口提交的方法有哪些(网站收录的方式都有哪些)

网站被搜索引擎收录是获得流量和曝光的重要前提&#xff0c;以下为你介绍常见的网站收录方式&#xff1a; 搜索引擎提交入口 各大搜索引擎都设有专门的网站收录入口&#xff0c;供站长提交网站。例如百度搜索资源平台、谷歌搜索控制台等。以百度为例&#xff0c;在百度搜索资…