ipnut (表单)

基本说明:

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

ipnut (表单) - 图1

  1. <form class="mui-input-group">
  2.     <div class="mui-input-row">
  3.         <label>用户名</label>
  4.     <input type="text" class="mui-input-clear" placeholder="请输入用户名">
  5.     </div>
  6.     <div class="mui-input-row">
  7.         <label>密码</label>
  8.         <input type="password" class="mui-input-password" placeholder="请输入密码">
  9.     </div>
  10.     <div class="mui-button-row">
  11.         <button type="button" class="mui-btn mui-btn-primary" >确认</button>
  12.         <button type="button" class="mui-btn mui-btn-danger" >取消</button>
  13.     </div>
  14. </form>

输入增强:

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

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

    ipnut (表单) - 图2

    1. <form class="mui-input-group">
    2.     <div class="mui-input-row">
    3.         <label>快速删除</label>
    4.         <input type="text" class="mui-input-clear" placeholder="请输入内容">
    5.     </div>
    6. </form>

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

    ipnut (表单) - 图3

    1. <div class="mui-input-row mui-search">
    2.     <input type="search" class="mui-input-clear" placeholder="">
    3. </div>

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

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

    ipnut (表单) - 图4

    1. <form class="mui-input-group">
    2.     <div class="mui-input-row">
    3.         <label>密码框</label>
    4.         <input type="password" class="mui-input-password" placeholder="请输入密码">
    5.     </div>
    6. </form>

初始化：

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

ipnut (表单) - 图5

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

  1. mui('.mui-input-row input').input();

示例:

验证表单是否为空

ipnut (表单) - 图6

  1. <div class="mui-input-group">
  2.     <div class="mui-input-row">
  3.         <label>用户名：</label>
  4.         <input type="text" class="mui-input-clear" placeholder="请输入用户名">
  5.     </div>
  6.     <div class="mui-input-row">
  7.         <label>密码：</label>
  8.         <input type="password" class="mui-input-clear mui-input-password" placeholder="请输入密码">
  9.     </div>
  10. </div>

提交时校验三个字段均不能为空，若为空则提醒并终止业务逻辑运行，使用each()方法循环校验，如下：

  1. mui("#input_example input").each(function() {
  2. //若当前input为空，则alert提醒 
  3. if(!this.value || this.value.trim() == "") {
  4.     var label = this.previousElementSibling;
  5.     mui.alert(label.innerText + "不允许为空");
  6.     check = false;
  7.     return false;
  8. }
  9. }); //校验通过，继续执行业务逻辑 
  10. if(check){
  11.     mui.alert('验证通过!')
  12. }

扩展阅读

  • 注：始终为button按钮添加type属性，若button按钮没有type属性，浏览器默认按照type="submit"逻辑处理， 这样若将没有type的button放在form表单中，点击按钮就会执行form表单提交，页面就会刷新，用户体验极差。

  • 使用Native.js实现打开页面默认弹出软键盘

代码块激活字符:

minput