<!--临时测试输入框长度开始-->

  <input class="inputstyle" type="text" maxlength="30" value="{{userInfo.name}}" bindblur="inputName"/>

  <view class="statementbox">

    <input class="inputstyle" type="text" maxlength="30" value="{{userInfo.name}}" bindblur="inputName"/>

  </view>

  <!--临时测试输入框长度结束-->

同一个输入框，下面的是放在弹性容器中，但界面显示长度不一样。容器中的只能显示11个汉字，如下图：

容器样式如下，加了个边框看效果：

.statementbox{

  /**定义容器弹性布局**/

  display: flex;

  /**容器中项目主轴为水平方向，起点在左端**/

  flex-direction: row;

  /**容器中项目主轴水平方向对齐方式为左对齐**/

  justify-content:flex-start;  

  flex-wrap: wrap;

  margin: 5rpx;

  border: 1px solid rgb(103, 172, 199);

}

输入框样式如下：

.inputstyle{

  display: inline;

  font-size:medium;

  color:rgb(0, 0, 0);

  margin: 5rpx;

  line-height: 60rpx;

}

做了一个样例页面：

WXML:

<!--临时测试页面，上线不要-->

<view>输入姓名：</view>

<input class="inputtest" type="text" maxlength="30" placeholder="请输入您的姓名" bindblur="inputName"/>

<view>输入地址：</view>

<view class="tempbox">

  <input class="inputtest" type="text" maxlength="30" placeholder="请输入地址" bindblur="inputAddress"/>

</view>

JS:

// 临时测试页面，上线不要

Page({

  data : {

    name : "",

    address : ""

  },

  inputName : function(e){

    this.setData({

      name : e.detail.value

    })

  },

  inputAddress : function(e){

    this.setData({

      address : e.detail.value

    })

  },

  onLoad(options) {

  }

})

WXSS:

/* pages/temptest/temptest.wxss */

.tempbox{

  /**定义容器弹性布局**/

  display: flex;

  /**容器中项目主轴为水平方向，起点在左端**/

  flex-direction: row;

  /**容器中项目主轴水平方向对齐方式为左对齐**/

  justify-content:flex-start;  

  flex-wrap: wrap;

  margin: 5rpx;

  border: 1px solid rgb(103, 172, 199);

}

.inputtest{

  display: inline;

  font-size:medium;

  color:rgb(0, 0, 0);

  margin: 5rpx;

  line-height: 60rpx;

}