记一次开发微信小程序遇到的坑 - input组件

问题描述：点击员工姓名无法弹出正确的输入方式，而是弹出和密码框一样的输入方式，导致姓名无法拼音书写

出现问题的代码

<!--用户名-->
  <view class="inputView"> 
    <image class="nameImage" src="/img/login_user.png"></image> 
    <label class="loginLab">用户名</label> 
    <input class="inputText" key="username"  placeholder="请输入员工姓名" bindinput="usenameInput" type="text" /> 
  </view> 

  <view class="line"></view> 
  <!--密码-->
  <view class="inputView"> 
    <input placeholder="" disabled="false" style="height:0.5rpx;min-height:0.5rpx;"/>
    <image class="keyImage" src="/img/password.png"></image> 
    <label class="loginLab">密码</label> 
    <input class="inputText" key="password" password="true" placeholder="请输入密码" bindinput="passwordInput" type="safe-password	" /> 
  </view> 

在网上查询后看到了一个文章，说在两个input组件中间再加一个，然后就解决了！

解决代码

<!--用户名-->
  <view class="inputView"> 
    <image class="nameImage" src="/img/login_user.png"></image> 
    <label class="loginLab">用户名</label> 
    <input class="inputText" key="username"  placeholder="请输入员工姓名" bindinput="usenameInput" type="text" /> 
  </view> 

  <input placeholder="" disabled="false" style="height:2rpx;min-height:2rpx;"/>

  <view class="line"></view> 
  <!--密码-->
  <view class="inputView"> 
    <input placeholder="" disabled="false" style="height:0.5rpx;min-height:0.5rpx;"/>
    <image class="keyImage" src="/img/password.png"></image> 
    <label class="loginLab">密码</label> 
    <input class="inputText" key="password" password="true" placeholder="请输入密码" bindinput="passwordInput" type="safe-password	" /> 
  </view>