微信小程序 input使用letter-spacing失效問題

根據ui設計稿,

原本思路是一個input搞定，下面的線使用背景圖

background:url('/images/line.png')no-repeat bottom center;

而後使用letter-spacing，讓字體間隔開。

可是遇到了小程序的坑，letter-sapcing在input中沒效果。

因而我gitlab上找到一個,模擬光標輸入框的源碼，並借鑑了做者的思路。（連接以下：https://github.com/evan2020/six-Input-box）

因而個人新思路是這樣的：

仍然使用一個input，並設置auto-focus,這樣當進入頁面的時候，手機端會自動彈出數字鍵盤。

而後模擬光標的css以下：

.cursor { width: 1px; height:80rpx; background-color: #2AC3A4; animation: focus 0.7s infinite;
}

/* 光標動畫 */ @keyframes focus { from { opacity: 1;
  } to { opacity: 0;
  } }

1）input設置margin-left:-100%,不顯示在頁面可視區域中，

2）上面線框位置，使用view標籤，仍然使用背景圖展現下面的間斷線

3）使用bindinput監聽input值的變化，並經過numList = [...e.detail.value]將input的值（字符串）轉換爲數組。並渲染在view中

<view id="searchNum" class="set-number" style="background:url({{line}}) no-repeat bottom center;background-size:100%">
    <view class="set-number-content">
      <view wx:if="{{!numList.length}}" class="cursor"></view>
      <text wx:if="{{numList.length}}">{{numList[0]}}</text>
    </view>
    <view class="set-number-content">
      <view wx:if="{{numList.length===1}}" class="cursor"></view>
      <text wx:if="{{numList.length>=2}}">{{numList[1]}}</text>
    </view>
    <view class="set-number-content">
      <view wx:if="{{numList.length===2}}" class="cursor"></view>
      <text wx:if="{{numList.length>=3}}">{{numList[2]}}</text>
    </view>
    <view class="set-number-content">
      <view wx:if="{{numList.length===3}}" class="cursor"></view>
      <text wx:if="{{numList.length>=4}}">{{numList[3]}}</text>
    </view>
  </view>

你們有更好的思路的，歡迎來賜教