ipnut (表单)

所有包裹在.mui-input-row 类中的 input、textarea等元素都将被默认设置宽度属性为width: 100%; 。 将 label 元素和上述控件控件包裹在.mui-input-group中可以获得最好的排列。

<form class="mui-input-group">
    <div class="mui-input-row">
        <label>用户名</label>
    <input type="text" class="mui-input-clear" placeholder="请输入用户名">
    </div>
    <div class="mui-input-row">
        <label>密码</label>
        <input type="password" class="mui-input-password" placeholder="请输入密码">
    </div>
    <div class="mui-button-row">
        <button type="button" class="mui-btn mui-btn-primary" >确认</button>
        <button type="button" class="mui-btn mui-btn-danger" >取消</button>
    </div>
</form>

mui目前提供的输入增强包括：快速删除、语音输入^{*5+ only}和密码框显示隐藏密码。

• 快速删除：只需要在input控件上添加.mui-input-clear类，当input 控件中有内容时，右侧会有一个删除图标，点击会清空当前input的内容； 快速删除

  <form class="mui-input-group">
      <div class="mui-input-row">
          <label>快速删除</label>
          <input type="text" class="mui-input-clear" placeholder="请输入内容">
      </div>
  </form>



• 搜索框：在.mui-input-row同级添加.mui-input-search 类，就可以使用search控件

  <div class="mui-input-row mui-search">
      <input type="search" class="mui-input-clear" placeholder="">
  </div>



• 语音输入^{*5+ only}：为了方便快速输入，mui集成了 HTML5+的语音输入，只需要在对应input控件上添加.mui-input-speech 类，就可以在5+环境下使用语音输入


• 密码框：给input元素添加.mui-input-password类即可使用 密码框

  <form class="mui-input-group">
      <div class="mui-input-row">
          <label>密码框</label>
          <input type="password" class="mui-input-password" placeholder="请输入密码">
      </div>
  </form>

mui在mui.init()中会自动初始化基本控件,但是 动态添加的Input组件需要重新进行初始化

打开chrome控制台运行下面这段代码,赋予☝️此密码框生命力