【HarmonyOS】键盘遮挡输入框时,实现输入框显示在键盘上方

【关键字】

harmonyOS、键盘遮挡input,键盘高度监听

【写在前面】

在使用API6、API7开发HarmonyOS应用时,常出现页面中需要输入input,但是若input位置在页面下方,在input获取焦点的时候,会出现软键盘挡住input情况,对于这个问题,这里介绍如何在input获取焦点时,将input显示在键盘上方功能,键盘收起时,将input回归到原位,即如下效果:

cke_515.pngcke_781.png

【页面布局】

首先我们编写一个简单的页面,这里直接将页面input设置在页面底部,代码如下:

// index.html
<div class="container"><input onfocus="foucs" value="{{inputVal}}" placeholder="请输入内容"style="position: absolute;bottom: {{keyboardHeight}}px;"></input>
</div>

【页面样式】

简单给input设置宽高,代码如下:

.container {display: flex;flex-direction: column;justify-content: flex-start;align-items: center;left: 0px;top: 0px;width: 100%;height: 100%;
}input {width: 100%;height: 40px;border-radius: 10px;
}

【页面逻辑】        

当input获取焦点时,通过 @ohos.window 相关接口监听键盘高度变化,从而改变input位置,代码如下:

import window from '@ohos.window'export default {data: {keyboardHeight: 0,},onInit() {},foucs() {console.info("foucs");let windowClass = null;window.getTopWindow((err, data) => {if (err) {console.error('Failed to obtain the top window. Cause: ' + JSON.stringify(err));return;}windowClass = data;console.info('Succeeded in obtaining the top window. Data: ' + JSON.stringify(data));try {// 开启键盘高度变化的监听windowClass.on("keyboardHeightChange", (data) => {console.info('Succeeded in enabling the listener for keyboard height changes. Data: ' + JSON.stringify(data));let height = data.height;// 键盘弹起时设置input高度if (this.keyboardHeight != height) {this.keyboardHeight = height % 3.8;console.info("keyboardHeightChange keyboardHeight:" + this.keyboardHeight)}})} catch (exception) {console.error('Failed to enable the listener for keyboard height changes. Cause: ' + JSON.stringify(exception));}})},
}

这样就实现输入框显示在键盘上方效果了

【参考文档】

https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/js-apis-window-0000001477981397-V3#ZH-CN_TOPIC_0000001573929313__%E5%AF%BC%E5%85%A5%E6%A8%A1%E5%9D%97

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

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

相关文章

数字图像处理-彩色图像处理

文章目录 一、彩色模型1.1RGB彩色模型1.2CMY和CMYK彩色模型1.3HSI彩色模型 二、伪彩色图像处理2.1灰度分层2.2灰度到彩色的变换 三、彩色图像的分割3.1RGB中的彩色图像分割3.2彩色边缘检测 一、彩色模型 1.1RGB彩色模型 RGB空间是生活中最常用的一个模型&#xff0c;电视机、…

手写自定义的spring-boot-start

需求&#xff1a;手写一个加密的spring-boot-start&#xff0c;按着用户定义的加密算法&#xff08;可选&#xff1a;MD5、SHA&#xff09;去加密内容 新建一个maven项目 新建好的项目结构和pom.xml如图 添加pom.xml 完整的pom.xml文件 <?xml version"1.0" …

25.6 matlab里面的10中优化方法介绍——模拟退火算法(matlab程序)

1.简述 相信没有相关物理知识背景的小伙伴看到“退火”二字是一脸懵逼的...固体的退火过程指的是将固体加热至足够高的温度&#xff0c;再使其慢慢冷却的过程。在加热过程中&#xff0c;原本有序排列的内部粒子开始无序运动&#xff0c;此时固体的内能不断增大&#xff1b;而在…

提取高度嵌套的对象里的指定属性?

如何提取高度嵌套的对象里的指定属性&#xff1f; function findKey(data, field) {let finding "";for (const key in data) {if (key field) {finding data[key];}if (typeof data[key] "object") {finding findKey(data[key], field);}if (findin…

大数据面试题:HBase的RegionServer宕机以后怎么恢复的?

面试题来源&#xff1a; 《大数据面试题 V4.0》 大数据面试题V3.0&#xff0c;523道题&#xff0c;679页&#xff0c;46w字 可回答&#xff1a;1&#xff09;HBase一个节点宕机了怎么办&#xff1b;2&#xff09;HBase故障恢复 参考答案&#xff1a; 1、HBase常见故障 导…

服务器磁盘占用过高分析

使用命令 du -sh查看出占用较大的目录&#xff0c;如下&#xff1a; 目录大小处理办法/usr/local/mysql/data16G转移部分文件/usr/local/nacos2.1G维持现状/logs4.4G删除部分文件/var1.9G删除部分文件 du -sh命令使用示例&#xff1a; du -sh /* 查看根目录各文件(夹)占用大小…

SpringMVC学习记录

SpringMVC技术与servlet技术功能等同&#xff0c;均属于web层开发技术 SpringMVC简介 SpringMVC概述 SpringMVC是一种基于Java实现MIVC模型的轻量级web框架 优点 使用简单&#xff0c;开发便捷&#xff08;相比于servlet)灵活性强 SpringMVC是一种表现层框架技术 Spring…

关于PHP性能的优化技巧

网上有无数关于PHP性能的优化技巧&#xff0c;有必要列出一张可供参考使用的清单。 笔者收集的这些技巧来源较广&#xff0c;完整性不能保证。 由于数量较多&#xff0c;这些优化技巧没有经过测试。请各位看官在使用之前自行测试&#xff0c;毕竟这些技巧是否能派上用场&#…

忘记数据库密码如何处理

windows 5.6.51版本及以前 #当前账号设置密码 set password password(123456); #当前账号取消密码 set password ; &#xff08;1&#xff09;用管理员身份打开控制台输入 net stop m5&#xff08;我的电脑MySQL名字为m5&#xff0c;根据自己的更改&#xff09; &#xff08;…

import函数用法

import 是Python中用于导入模块&#xff08;包括标准库、第三方库和自定义模块&#xff09;的关键字。导入模块使得你可以在你的代码中使用模块中定义的函数、类、变量和其他功能&#xff0c;下面是关于import函数用法的详细解释。 本文主要包括以下内容&#xff1a; 1.导入整…

maven下载安装及初次使用相关配置

maven下载按照及初次使用相关配置 一、下载 与安装 下载完解压放在文件夹中即可&#xff01; 依赖Java&#xff0c;需要配置JAVA_HOME设置MAVEN自身的运行环境&#xff0c;需要配置MAVEN_HOME&#xff08;参考安装java&#xff09;测试环境配置结果 MVN测试成功&#xff01…

简化 if true...else 条件表达式

less 复制代码 less 复制代码 // bad if (x "abc" || x "def" || x "ghi" || x "jkl") {//logic }// better if (["abc", "def", "ghi", "jkl"].includes(x)) { //logic }2然后调用该数组…

Redis 高可用之持久化

目录 一、Redis 高可用 1.1 什么是高可用 1.2 Redis的高可用技术 二、Redis持久化 2.1 持久化的功能 2.2 Redis提供两种方式进行持久化&#xff1a; 三、RDB持久化 3.1 触发条件 &#xff08;1&#xff09;手动触发 &#xff08;2&#xff09;自动触发 &#xff08;3…

UG\NX 二次开发 选择相切面、相邻面的选择面控件

文章作者&#xff1a;里海 来源网站&#xff1a;https://blog.csdn.net/WangPaiFeiXingYuan 简介&#xff1a; 有群友问“UFUN多选功能过滤面不能选择相切面或相邻面之类的吗&#xff1f;” 这个用Block UI的"面收集器"就可以&#xff0c;ufun函数是不行的。 效果&am…

12-4_Qt 5.9 C++开发指南_创建和使用共享库

文章目录 1. 创建共享库2. 使用共享库2.1 共享库的调用方式2.2 隐式链接调用共享库2.3 显式链接调用共享库 1. 创建共享库 除了静态库&#xff0c;Qt 还可以创建共享库&#xff0c;也就是 Windows 平台上的动态链接库。动态链接库项目编译后生成 DLL 文件&#xff0c;DLL 文件…

docker 保存和载入镜像

查看本机docker镜像 docker images保存镜像 docker save -o /home/space/work1/docker_qnx7.1.tar.gz a01ee6d74c36复制镜像到其他服务器 scp /home/space/work1/docker_qnx7.1.tar.gz XXXIP:/home/dell/work1/登录新 服务器操作 docker load -i docker_qnx7.1.tar.gz载入后…

2023牛客多校第三场

2023牛客多校第三场 B 很烦的dp f[2][300][300][300] 需要前缀和优化滚动数组 f[i][x][y][k] D 扩展域并查集之种类并查集的最小代价 1 到 n表示行变 n1~ 2n表示行不变 2n1~ 3n表示列变 3n1~ 4n表示列不变 对于一个需要变换的点比如说solve(int op)函数中a[i][j]!op的话就…

网络安全/信息安全—学习笔记

一、网络安全是什么 网络安全可以基于攻击和防御视角来分类&#xff0c;我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术&#xff0c;而“蓝队”、“安全运营”、“安全运维”则研究防御技术。 无论网络、Web、移动、桌面、云等哪个领域&#xff0c;都有攻与防两面…

归并排序(c++题解)

题目描述 将读入的 N 个数从小到大排序后输出。 输入格式 第一行为一个正整数 N。 第二行包含 N 个空格隔开的正整数 ai​&#xff0c;为你需要进行排序的数。 输出格式 将给定的 N 个数从小到大输出&#xff0c;数之间空格隔开&#xff0c;行末换行且无空格。 输入输出…

MySQL 的解析器以及 MySQL8.0 做出的改进 | StoneDB技术分享 #2

设计&#xff1a;小艾 审核&#xff1a;丁奇 编辑&#xff1a;宇亭 作者&#xff1a;柳湛宇&#xff08;花名&#xff1a;乌淄&#xff09; 浙江大学-软件工程-在读硕士、StoneDB 内核研发实习生 一、MySQL 的解析器 MySQL 所使用的解析器&#xff08;即 Lexer 和 Parser …