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

小丁学Java

已于 2024-12-18 13:45:02 修改

阅读量995

点赞数 15

CC 4.0 BY-SA版权

分类专栏：微信小程序WxMa 文章标签：微信小程序小程序

于 2024-12-17 01:41:17 首次发布

本文链接：https://blog.csdn.net/m0_65152767/article/details/144521682

文章目录

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' data-num='5'>5