微信页面公众号页面 安全键盘收起后页面空白

微信浏览器打开H5页面和公众号页面,输入密码时调起安全键盘,键盘收起后 键盘下方页面留白
解决办法:
1、(简单)只有在调起安全键盘(输入密码)的时候会出现这种情况,将input属性改为number,添加一个加密样式就可以了
<input type="npmber"name="password"placeholder="请输入您的密码"style="-webkit-text-security: disc;text-security: disc;"
>
Vant组件库就这样写:
<van-fieldv-model.trim="loginForm.password"class="hidden"type="number"name="password"label="密码:"autocomplete="off"placeholder="请输入您的密码":rules="[{ validator: loginValidator }]"/>::v-deep {.hidden .van-field__value {-webkit-text-security: disc;}}
2、(麻烦)只有密码输入框的时候有这个问题,普通的输入框没有出现这个问题,所以考虑当密码输入框失去焦点但是底部空白的时候,再创建一个input,使其聚焦并且失去焦点。但是focusout刚触发的时候document.documentElement.clientHeight的高度还没有改变,需要定时器过个一段时间才会改变,这样就会 有一个底部空白的过程然后再消失。
mounted() {this.bodyHeight = document.documentElement.clientHeightvar timer = nulldocument.body.addEventListener('focusin', () => { // 软键盘弹起事件if (timer && e.target.type !== 'button') {clearTimeout(timer)timer = null}})document.body.addEventListener('focusout', (e) => { // 软键盘关闭事件if (e.target.type === 'password') {timer = setTimeout(() => {clearTimeout(timer)timer = nullconst nowH = document.documentElement.clientHeightconsole.log('timeout', nowH, this.bodyHeight)if (nowH < this.bodyHeight) {const oinput = document.createElement('input')oinput.style.width = '0px'document.body.appendChild(oinput)oinput.focus()oinput.blur()document.body.removeChild(oinput)}}, 1000)})
},
3、(不实用)在手机设置中关闭安全键盘
手机设置→更多设置→语言与输入法→安全键盘→关闭安全键盘
相关文章:
微信页面公众号页面 安全键盘收起后页面空白
微信浏览器打开H5页面和公众号页面,输入密码时调起安全键盘,键盘收起后 键盘下方页面留白 解决办法: 1、(简单)只有在调起安全键盘(输入密码)的时候会出现这种情况,将input属性改为n…...
数据结构 - 二叉树
递归实现前中后序遍历 #include<stdio.h> #include<stdlib.h>#define TElemType inttypedef struct BiTNode{TElemType data;struct BiTNode *lchild,*rchild; }BiTNode,*BiTree; BiTNode root;void visit(TElemType& e){printf("%d",e); }void Pre…...
【Overload游戏引擎细节分析】从视图投影矩阵提取视锥体及overload对视锥体的封装
overoad代码中包含一段有意思的代码,可以从视图投影矩阵逆推出摄像机的视锥体,本文来分析一下原理 一、平面的方程 视锥体是用平面来表示的,所以先看看平面的数学表达。 平面方程可以由其法线N(A, B, C)和一个点Q(x0,…...
Linux 安全 - LSM hook点
文章目录 一、LSM file system hooks1.1 LSM super_block hooks1.2 LSM file hooks1.3 LSM inode hooks 二、LSM Task hooks三、LSM IPC hooks四、LSM Network hooks五、LSM Module & System hooks 一、LSM file system hooks 在VFS(虚拟文件系统)层…...
【iOS逆向与安全】越狱检测与过检测附ida伪代码
首先在网上查找一些检测代码 放入项目运行,用 ida 打开后 F5 得到下面的 __int64 __usercall sub_10001B3F0<X0>(__int64 a1, __int64 a2, __int64 a3, __int64 a4, __int64 a5, __int64 a6, __int64 a7, __int64 a8, __int64 a9, __int64 a10, __int64 a11…...
Android Studio gradle手动下载配置
项目同步时,有时候会遇到Android Studio第一步下载gradle就是连接失败的问题。 这种情况,我们可以手动去gradle官网下载好gradle文件,放置在Android Studio的缓存目录下,这样AS在同步代码时就会自动解压下载好的文件。 步骤如下&…...
ChatGPT Prompting开发实战(十三)
一. 如何评估prompts是否包含有害内容 用户在与ChatGPT交互时提供的prompts可能会包括有害内容,这时可以通过调用OpenAI提供的API来进行判断,接下来给出示例,通过调用模型“gpt-3.5-turbo”来演示这个过程。 prompt示例如下&…...
银河麒麟 ARM 架构 离线安装Docker
1. 下载对应的安装包 进入此地址下载对应的docker 离线安装包 下载地址 将文件上传到服务器 解压此文件 tar zxf docker-18.09.1.tgz将 docker 相关命令拷贝到 /usr/bin,方便直接运行命令 cp docker/* /usr/bin/启动Docker守护程序 dockerd &验证是否安装成…...
虹科科技 | 探索CAN通信世界:PCAN-Explorer 6软件的功能与应用
CAN(Controller Area Network)总线是一种广泛应用于汽车和工业领域的通信协议,用于实时数据传输和设备之间的通信。而虹科的PCAN-Explorer 6软件是一款功能强大的CAN总线分析工具,为开发人员提供了丰富的功能和灵活性。本文将重点…...
SELECT COUNT(*)会不会导致全表扫描引起慢查询
SELECT COUNT(*)会不会导致全表扫描引起慢查询呢? SELECT COUNT(*) FROM SomeTable 网上有一种说法,针对无 where_clause 的 COUNT(*),MySQL 是有优化的,优化器会选择成本最小的辅助索引查询计数,其实反而性能最高&…...
英国物联网初创公司【FourJaw】完成180万英镑融资
来源:猛兽财经 作者:猛兽财经 猛兽财经获悉,总部位于英国谢菲尔德的物联网初创公司【FourJaw】今日宣布已完成180万英镑融资。 本轮融资完成后,FourJaw的总融资金额已达400万英镑,本轮融资的投资机构包括:…...
许战海战略文库|无增长则衰亡:中小型制造企业增长困境
竞争环境不是匀速变化,而是加速变化。企业的衰退与进化、兴衰更迭在不断发生,这成为一种不可避免的现实。事实上,在产业链竞争中增长困境不分企业大小,而是一种普遍存在的问题,许多收入在1亿至10亿美元间的制造企业也同…...
广州华锐互动:候车室智能数字孪生系统实现交通信息可视化
随着科技的不断发展,数字化技术在各个领域得到了广泛的应用。智慧车站作为一种新型的交通服务模式,通过运用先进的数字化技术,为乘客提供了更加便捷、舒适的出行体验。 将智慧车站与数字孪生大屏结合,可以将实际现实世界的实体车站…...
智慧工地:助力数字建造、智慧建造、安全建造、绿色建造
智慧工地管理系统融合计算机技术、物联网、视频处理、大数据、云计算等,为工程项目管理提供先进的技术手段,构建施工现场智能监控系统,有效弥补传统监理中的缺陷,对人、机、料、法、环境的管理由原来的被动监督变成全方位的主动管…...
增强基于Cortex-M3的MCU以处理480 Mbps高速USB
通用串行总线(USB)完全取代了PC上的UART,PS2和IEEE-1284并行接口,现在已在嵌入式开发应用程序中得到广泛认可。嵌入式开发系统使用的大多数I / O设备(键盘,扫描仪,鼠标)都是基于USB的…...
山海鲸汽车需求调研系统:智慧决策的关键一步
随着社会的发展和科技的进步,汽车行业也迎来了新的挑战和机遇。如何更好地满足用户需求、提高产品竞争力成为了汽车制造商们关注的焦点。在这个背景下,山海鲸汽车需求调研互动系统应运而生,为汽车行业赋予了智慧决策的力量。 智慧决策的核心&…...
视频缩放的概念整理-步长数组
最近在读ffmpeg的代码时候,这个接口不是很能看懂int sws_scale(struct SwsContext *c, const uint8_t *const srcSlice[], const int srcStride[], int srcSliceY, int srcSliceH, uint8_t *const dst[], const int dstStride[]); 多方请教后,记录结果如…...
TensorFlow入门(二十一、softmax算法与损失函数)
在实际使用softmax计算loss时,有一些关键地方与具体用法需要注意: 交叉熵是十分常用的,且在TensorFlow中被封装成了多个版本。多版本中,有的公式里直接带了交叉熵,有的需要自己单独手写公式求出。如果区分不清楚,在构建模型时,一旦出现问题将很难分析是模型的问题还是交叉熵的使…...
UDP通信:快速入门
UDP协议通信模型演示 UDP API DatagramPacket:数据包对象(韭菜盘子) public DatagramPacket(byte[] buf, int length, InetAddress address, int port)创建发送端数据包对象 buf:要发送的内容,字节数组 length&…...
修炼k8s+flink+hdfs+dlink(四:k8s(一)概念)
一:概念 1. 概述 1.1 kubernetes对象. k8s对象包含俩个嵌套对象字段。 spec(规约):期望状态 status(状态):当前状态 当创建对象的时候,会按照spec的状态进行创建,如果…...
超短脉冲激光自聚焦效应
前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应,这是一种非线性光学现象,主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场,对材料产生非线性响应,可能…...
【杂谈】-递归进化:人工智能的自我改进与监管挑战
递归进化:人工智能的自我改进与监管挑战 文章目录 递归进化:人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管?3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...
如何在看板中体现优先级变化
在看板中有效体现优先级变化的关键措施包括:采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中,设置任务排序规则尤其重要,因为它让看板视觉上直观地体…...
工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配
AI3D视觉的工业赋能者 迁移科技成立于2017年,作为行业领先的3D工业相机及视觉系统供应商,累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成,通过稳定、易用、高回报的AI3D视觉系统,为汽车、新能源、金属制造等行…...
如何在网页里填写 PDF 表格?
有时候,你可能希望用户能在你的网站上填写 PDF 表单。然而,这件事并不简单,因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件,但原生并不支持编辑或填写它们。更糟的是,如果你想收集表单数据ÿ…...
服务器--宝塔命令
一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行! sudo su - 1. CentOS 系统: yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...
Java编程之桥接模式
定义 桥接模式(Bridge Pattern)属于结构型设计模式,它的核心意图是将抽象部分与实现部分分离,使它们可以独立地变化。这种模式通过组合关系来替代继承关系,从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...
【JavaSE】多线程基础学习笔记
多线程基础 -线程相关概念 程序(Program) 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序,比如我们使用QQ,就启动了一个进程,操作系统就会为该进程分配内存…...
计算机基础知识解析:从应用到架构的全面拆解
目录 前言 1、 计算机的应用领域:无处不在的数字助手 2、 计算机的进化史:从算盘到量子计算 3、计算机的分类:不止 “台式机和笔记本” 4、计算机的组件:硬件与软件的协同 4.1 硬件:五大核心部件 4.2 软件&#…...
安卓基础(Java 和 Gradle 版本)
1. 设置项目的 JDK 版本 方法1:通过 Project Structure File → Project Structure... (或按 CtrlAltShiftS) 左侧选择 SDK Location 在 Gradle Settings 部分,设置 Gradle JDK 方法2:通过 Settings File → Settings... (或 CtrlAltS)…...
