当前位置: 首页 > article >正文

微信小程序苹果手机自带的数字键盘老是弹出收起,影响用户体验,100%解决

文章目录

  • 1、index.wxml
  • 2、index.js
  • 3、index.wxss

1、index.wxml

<!--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">
        <input
          type="number"
          data-index="{
   {index}}"
          bindinput="onInput"
          maxlength="1"
          adjust-position="false"
          cursor-spacing="0"
          style="z-index: 1; width: 50px; height: 50px; text-align: center;"
          focus="{
   {focusIndex === index}}"
          disabled="true"
        />
      </block> -->
      <!-- <block wx:for="{
   {codes}}" wx:for-index="index" wx:key="index">
        <input
          type="number"
          data-index="{
   {index}}"
          maxlength="1"
          adjust-position="false"
          cursor-spacing="0"
          style="z-index: 1; width: 80rpx; height: 100rpx; text-align: center;"
          focus="{
   {focusIndex === index}}"
          value="{
   {codes[index]}}" 
          bindtap="onCodeTap" 
          bindinput="onInput" 
          placeholder=" " 
        />
      </block> -->
      <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' 

http://www.kler.cn/a/441474.html

相关文章:

  • Cesium特效——城市白模的科技动效的各种效果
  • 《鸿蒙Next原生应用的独特用户体验之旅》
  • 基于JAVA的微信点餐小程序设计与实现(LW+源码+讲解)
  • QT:QTabWidget设置tabPosition为West时,文字向上
  • 高效安全文件传输新选择!群晖NAS如何实现无公网IP下的SFTP远程连接
  • LAYA3.0 组件装饰器说明
  • 代码随想录算法训练营day43|动态规划part10
  • MR30分布式IO模块,为港口岸桥安全增效保驾护航
  • 路径规划之启发式算法之十七:淘金优化算法(Gold Rush Optimizer, GRO)
  • 基于Spring Boot的体育商品推荐系统
  • 大数据与AI:从分析到预测的跃迁
  • Webpack中loader的作用/ loader是什么?
  • Halcon面试题及参考答案
  • Qt读写文本文件
  • 【Spring 全家桶】Spring MVC 快速入门,开始web 更好上手(下篇) , 万字解析, 建议收藏 ! ! !
  • 通过gateway实现服务的平滑迁移
  • 登陆harbor发现证书是错误的, 那么如何更新harbor的证书呢
  • 深入解析Ubuntu 20.04 ROS中的setup.bash文件
  • OPC UA、MQTT 和 HTTP性能分析及使用场景推荐
  • Linux shell脚本练习(三)
  • gateway 微服务的入口-笔记
  • opencv实战--颜色识别
  • 数据结构day3作业
  • Python 写的《桌面时钟》屏保
  • React自学:如何使用localStorage,以及如何实现删除笔记操作
  • docker-4.迁移存储目录