通过使用 contenteditable=“true“,我们彻底防止了 iOS 系统键盘的弹出

明白了,对于苹果手机(iOS),即使使用了 bindtape.preventDefault() 来阻止默认行为,系统键盘仍然可能会弹出。这是因为 iOS 对输入框的处理方式与 Android 不同,尤其是在处理 input 元素时,iOS 会更加积极地弹出键盘。

解决方案

为了彻底防止 iOS 系统键盘弹出,我们可以采取以下几种方法:

  1. 使用 contenteditable="true" 替代 input

    • contenteditable="true" 是一种 HTML 属性,允许用户编辑元素的内容,但不会触发系统键盘。我们可以用它来替代 input,并通过 JavaScript 动态更新内容。
  2. 隐藏 input 元素

    • 我们可以创建一个不可见的 input 元素,并将其 display 设置为 nonevisibility: hidden,以防止系统键盘弹出。然后通过自定义的 divview 来显示用户输入的内容。
  3. 使用 readonly 并结合 blur 事件

    • 虽然 readonly 会导致系统键盘弹出,但我们可以在用户点击输入框时立即调用 blur() 方法,强制取消焦点,从而防止键盘弹出。

推荐方案:使用 contenteditable="true"

这种方法不仅可以防止系统键盘弹出,还能确保用户能够看到输入的内容,并且代码结构相对简单。

修改后的代码
index.wxml
<view class="container">
  <view class="code-input-container">
    <view class="code-input-boxes">
      <block wx:for="{
    {codes}}" wx:for-index="index" wx:key="index">
        <view
          class="code-input"
          data-index="{
    {index}}"
          bindtap="onCodeTap"
          style="width: 80rpx; height: 100rpx; text-align: center;"
          contenteditable="{
    {focusIndex === index}}"
        >
          {
  {codes[index] || ''}}
        </view>
      </block>
    </view>

    <!-- 自定义数字键盘 -->
    <view class='numModal'>
        <view>
          <view bindtap='clickNum' data-num='1'>1</view>
          <view bindtap='clickNum' data-num='2'>2</view>
          <view bindtap='clickNum' data-num='3'>3</view>
        </view>
        <view>
          <view bindtap='clickNum' data-num='4'>4</view>
          <view bindtap='clickNum' data-num='5'>5</view>
          <view bindtap='clickNum' data-num='6'>6</view>
        </view>
        <view>
          <view bindtap

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

11-C语言结构体(下篇)

一、结构体指针变量 结构体指针变量&#xff1a;本质上是一个指针变量&#xff0c;保存的是结构体变量的地址。 1.结构体变量的地址 结构体变量的地址&#xff1a;对结构体变量名取地址。 代码演示 typedef struct stu {char name[32];int age;float score; }STU;int main…

linux普通用户使用sudo不需要输密码

1.root用户如果没有密码&#xff0c;先给root用户设置密码 sudo passwd root #设置密码 2.修改visudo配置 su #切换到root用户下 sudo visudo #修改visudo配置文件 用户名 ALL(ALL) NOPASSWD: ALL #下图所示处新增一行配置 用户名需要输入自己当前主机的用户名

百度面试手撕 go context channel部分学习

题目 手撕 对无序的切片查询指定数 使用context进行子协程的销毁 并且进行超时处理。 全局变量定义 var (startLoc int64(0) // --- 未处理切片数据起始位置endLoc int64(0) // --- 切片数据右边界 避免越界offset int64(0) // --- 根据切片和协程数量 在主线程 动态设…

任务一登录安全加固

1 &#xff08;1&#xff09;、&#xff08;2&#xff09; secpol.msc打开本地安全策略 2 &#xff08;1&#xff09; DCOM: 在安全描述符定义语言(SDDL)语法中的计算机访问限制 没有定义 DCOM: 在安全描述符定义语言(SDDL)语法中的计算机启动限制 没有定义 Microsoft 网络服…

无人机推流直播平台EasyDSS视频技术如何助力冬季森林防火

冬季天干物燥&#xff0c;大风天气频繁&#xff0c;是森林火灾的高发期。相比传统的人力巡查&#xff0c;无人机具有更高的灵敏度和准确性&#xff0c;尤其在夜间或浓雾天气中&#xff0c;依然能有效地监测潜在火源。 无人机可以提供高空视角和实时图像传输&#xff0c;帮助巡…

写SQL太麻烦?免费搭建 Text2SQL 应用,智能写 SQL | OceanBase AI 实践

自OceanBase 4.3.3版本推出以来&#xff0c;向量检索的能力受到了很多客户的关注&#xff0c;也纷纷表达希望OB能拓展更多 多模数据库大模型 的AI应用实践。 在上篇文章 &#x1f449; OceanBase LLM&#xff0c;免费构建你的专属 AI 助手 &#xff0c;我们介绍了如何去搭建一…

Halcon 机器视觉案例 之 药剂液面高度测量

第二篇 机器视觉案例 之 药剂液面高度测量 文章目录 第二篇 机器视觉案例 之 药剂液面高度测量1.案例要求2.实现思路2.1获得液面的位置&#xff1a;2.1.1 获得每支药剂的位置坐标2.1.2 根据药剂的横坐标设置卡尺工具助手找到每一个液面的位置 2.2 获得基准线的位置&#xff1a;…

使用k6进行MongoDB负载测试

1.安装环境 安装xk6-mongo扩展 ./xk6 build --with github.com/itsparser/xk6-mongo 2.安装MongoDB 参考Docker安装MongoDB服务-CSDN博客 连接成功后新建test数据库和sample集合 3.编写脚本 test_mongo.js import xk6_mongo from k6/x/mongo;const client xk6_mongo.new…

LabVIEW随机扫描成像系统

利用LabVIEW开发了一套随机扫描成像系统&#xff0c;利用硬件时钟实现声光偏转器&#xff08;AOD&#xff09;的频率控制与信号采集之间的高速时间同步。系统利用了高精度的时钟同步技术&#xff0c;确保了成像精度和重复性&#xff0c;从而有效提高了成像速度和质量。 项目背景…

29. 多线程编程

一、什么是线程 线程&#xff08;thread&#xff09;它们是同一个进程下执行的&#xff0c;并共享相同的下上文。线程包括开始、执行顺序和结束三部分。它有一个指令指针&#xff0c;用于记录当前运行的上下文。当其它线程运行时&#xff0c;它可以被抢占&#xff08;中断&…

精准采集整车信号:风丘混合动力汽车工况测试

一 背景 混合动力汽车是介于纯电动汽车与燃油汽车两者之间的一种新能源汽车。它既包含纯电动汽车无污染、启动快的优势&#xff0c;又拥有燃油车续航便捷、不受电池容量限制的特点。在当前环境下&#xff0c;混合动力汽车比纯电动汽车更符合目前的市场需求。 然而&#xff0c…

《军工记忆》第二季播出,科技创新铸国之重器

2019年8月1日晚20点&#xff0c;《军工记忆》第二季在央视纪录频道&#xff08;CCTV-9&#xff09;播出&#xff0c;第一集《第一颗氢弹》首当其冲&#xff0c;为我们生动描绘了氢弹研制过程的艰难岁月&#xff0c;重现中国军工事业的漫漫长路&#xff0c;科技创新铸国之重器。…

QT5.9.9+ARM交叉编译开发环境搭建【详细步骤】

文章目录 1.前言2.Linaro编译器下载2.qt-everywhere编译安装3.Linux下QT Creator安装4.交叉编译环境配置5.QTARM程序打包参考文献 1.前言 本文将以32位的ARM开发板为例&#xff0c;搭建基于Ubuntu 16.04虚拟机的QTARM开发环境&#xff0c;使用的软件如下&#xff1a; 序号软件…

深入解析 StarRocks 物化视图:全方位的查询改写机制

小编导读&#xff1a; 本文将重点介绍如何利用物化视图进行查询改写。文章将全面介绍物化视图的基本原理、关键特性、应用案例、使用场景、代码细节以及主流大数据产品的物化视图改写能力对比。 物化视图在 StarRocks 中扮演着至关重要的角色&#xff0c;它是进行数据建模和加速…

挑战一个月基本掌握C++(第五天)了解运算符,循环,判断

一 运算符 运算符是一种告诉编译器执行特定的数学或逻辑操作的符号。C 内置了丰富的运算符&#xff0c;并提供了以下类型的运算符&#xff1a; 算术运算符关系运算符逻辑运算符位运算符赋值运算符杂项运算符 1.1 算术运算符 假设变量 A 的值为 10&#xff0c;变量 B 的值为…

通过阿里云 Milvus 与 PAI 搭建高效的检索增强对话系统

背景介绍 阿里云向量检索服务Milvus版&#xff08;简称阿里云Milvus&#xff09;是一款云上全托管服务&#xff0c;确保了了与开源Milvus的100%兼容性&#xff0c;并支持无缝迁移。在开源版本的基础上增强了可扩展性&#xff0c;能提供大规模 AI 向量数据的相似性检索服务。相…

jQuery总结(思维导图+二维表+问题)

关于什么是jQuery&#xff1a;&#xff08;下面是菜鸟里的介绍&#xff09; jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 jQuery 很容易学习。 而jQuery对我的感受就是&#xff0c;链式运用的很形象&#xff0c;隐式迭代还有一些兼容性强的优点&…

(14)CT137A- 动态数码管设计

&#xff08;1&#xff09;了解板卡原理图中数码管的特性&#xff1a;共阳极数码管&#xff0c;公共端连接了电源&#xff0c;FPGA IO口低电平有效&#xff0c;另外&#xff0c;可以看到位选端FPGA位选低电平时选通。 &#xff08;2&#xff09;刷新时间的设定&#xff1a;众所…

UG NX二次开发(C#)-如何设置UGOpen的UF_CAM_geom_type_e枚举类型

文章目录 1、前言2、UF_CAM_geom_type_e类型说明3、在C#的类型1、前言 UG NX二次开发提供的帮助文档,无论是c/c++、C#、Python、VB语言,其采用UFun函数时都是参考的UGOpen的帮助文档,即是:UGOPEN函数参考手册(nx6).CHM,后续的都没有怎么增加,这个在哪个版本中都适用。但…

内容与资讯API优质清单

作为开发者&#xff0c;拥有一套API合集是必不可少的。这个开发者必备的API合集汇集了各种实用的API资源&#xff0c;为你的开发工作提供了强大的支持&#xff01;无论你是在构建网站、开发应用还是进行数据分析&#xff0c;这个合集都能满足你的需求。你可以通过这些免费API获…