小程序开发踩坑记录（三）——input内的文字设置letter-spacing无效

①问题描述

给input内的文字设置letter-spacing属性无效，而该属性对view等标签可正常生效。
P.S. 本文并未解决这个问题（那是小程序开发人员应该干的事），只是提供了一种方式绕过这个问题，从而实现了相似的结果。

②应用场景

如图示的场景中，需要在数个间隔较宽的方框内填入字符，首先想到的方法为：以多个方框为背景图片，其上定位一个input，并使用letter-spacing使得input内的文字字间距增大到每个字符都正好嵌入框内，即可简单而完美的解决这个设计。
然而问题来了：letter-spacing对input内的文字不起作用，这个办法只得放弃，就很气（无能狂怒）。

③解决方法

经过了各种尝试，最后采用了以下方式解决这个问题：
基本思路为：
首先，7个方框为7个view标签，float定位至设计图样式，并将其中的文字分别绑定 data 中 platenumber 参数的第0到6位；
之后，在其上定位一个宽高足以覆盖 view 的 inpu t将其盖住，设置{ position: absolute ; left : -200rpx }，并绑定 bindinput 事件将输入的内容set到 platenumber 参数中。
画个简单的示意图：

④总结

1. input的border、color、background统统设置为transparent以将其从视觉上完全隐藏；
2. input左移是因为输入框有焦点时闪动的光标无法透明，只好这样将其隐藏在屏幕外；
3. 需要根据需求设置input的max-length（与view方框的个数一致）以防止输入的过长，导致光标进入可视范围以及影响最后提交的数据；
4. 待改进之处：①方框内无闪动的光标提示输入至哪一位（应该不难解决，笔者暂且搁置）；②点击六个方框左侧直至屏幕边缘的一小部分区域也可激活输入（不影响使用，笔者暂未想到办法解决，完美主义者可帮忙思考下）；③无法从中间选中某个数字单独修改，只能从后往前删掉修改。
5. 如果还有更好的解决办法，请一定不吝赐教哇 （* - *）

⑤code

wxml：

<view class='inputContainer'>
    <view class="showNumber">{{plateNumber[0]}}</view>
    <view class="showNumber">{{plateNumber[1]}}</view>
    <view class="showNumber">{{plateNumber[2]}}</view>
    <view class="showNumber">{{plateNumber[3]}}</view>
    <view class="showNumber">{{plateNumber[4]}}</view>
    <view class="showNumber">{{plateNumber[5]}}</view>
    <view class="showNumber">{{plateNumber[6]}}</view>
    <input class='plateInput' bindinput="inputPlateNumber" maxlength="7" bindconfirm='submit'></input>
  </view>

wxss

.inputContainer {
  position: relative;
  width: 660rpx;
  height: 85rpx;
}

.showNumber{
  width: 75rpx;
  height: 75rpx;
  border: 4rpx solid #ccc;
  margin:6rpx;
  float: left;
  border-radius: 6rpx;
  text-align: center;
  line-height: 75rpx;
  font-size: 40rpx;
}

.plateInput{
  width: 860rpx;
  height: 83rpx;
  border: 1px solid black;
  position: absolute;
  top: 0;
  left: -200rpx;
  opacity: 0;
  color: transparent;
}

js就是个简单的setData就不放了。