weex☞验证码录入

weex中input有许多的限制，好多方法和属性不能使用。

项目中用到了验证码录入：
　　最初思路是使用四个输入框，然后监听input事件，切换焦点，比较麻烦，再说在Android手机上也监听不了键盘的删除事件，无法使用删除（后退）输入的验证码。
　　思来想去，来个投机取巧的方案，就是写四个假的输入框，然后将真实的输入框定位到第一个假输入框上，当用户点击录入时触发input，调出手机端键盘，进行录入，把录入的结果赋值到假的录入框上。
　　这里把真实的输入框的文字设置为最小像素，就看不到input的录入结果了，（在浏览器端应该是能看到的，毕竟有默认最小字体，但是在手机上是看不到的）。

ok，虽然不是最好的方案，但是能够解决问题，最终效果如下：

input.jpg

直接上代码，主要是思路，没什么技术含量

<template>
   <div style="flex: 1;width: 750px">
       <div class="input-wrap">
           <text class="item">{{input1}}</text>
           <text class="item">{{input2}}</text>
           <text class="item">{{input3}}</text>
           <text class="item">{{input4}}</text>
       </div>
       <input type="number" maxlength="4" v-model="code" class="input" @input="change">
   </div>
</template>

<script>
   export default {
       name: "demo",
       data() {
           return {
               code: '',
               input1: '-',
               input2: '-',
               input3: '-',
               input4: '-',
           }
       },
       methods: {
           change() {
               console.log(this.code)
               this.input1 = this.code.substring(0, 1)
               this.input2 = this.code.substring(1, 2)
               this.input3 = this.code.substring(2, 3)
               this.input4 = this.code.substring(3, 4)
           }
       }
   }
</script>

<style scoped>
   .input-wrap {
       margin-top: 100px;
       display: flex;
       flex-direction: row;
       justify-content: space-around;
   }

   .item {
       height: 80px;
       line-height: 80px;
       width: 80px;
       font-size: 20px;
       text-align: center;
       border-top-style: solid;
       border-top-width: 5px;
       border-right-width: 5px;
       border-bottom-width: 5px;
       border-left-width: 5px;
       border-top-color: #999999;
       border-right-color: #999999;
       border-bottom-color: #999999;
       border-left-color: #999999;
   }

   .input {
       position: absolute;
       top: 100px;
       left: 80px;
       height: 70px;
       width: 750px;
       outline: none;
       color: #ffffff;
       font-size: 1px;
       line-height: 70px;
       background-color: transparent;
   }
</style>