输入框

class 属性 描述
form-control (必填项),定义html元素的表单样式，可在所有输入控件上设置该类，另外还包括select下拉框，
um-input-group (必填项),输入框组标志，定义组件的布局为table，设置左边或者右边带按钮的输入框，可用在登录和搜索框
um-input-text (必填项),输入框只有底部一条线的输入框组件
um-input-left-icon (可选值),输入框只有底部一条线的左边图标
attr 属性 描述
placeholder (可选值),提供可描述输入字段预期值的提示信息（hint）。该提示会在输入字段为空时显示，并会在字段获得焦点时消失；placeholder属性适用于以下的input类型：text, search, url, telephone, email 以及 password。
disabled (可选值),禁用输入框

普通輸入框

  1. <input type="text" value="input value" placeholder="输入文字" class="form-control">

自定义宽度

  1. <input type="text"  style="width:200px;" placeholder="width:200px;" class="form-control">

输入框文字清除

  1. <div class="pr">
  2.     <input type="text" class="form-control" placeholder="该输入框文本可以清除">
  3.     <span class="um-input-clear ti-close"></span>
  4. </div>

  1. <script>
  2. // 设置输入框文字清除的事件监听
  3. $(".um-input-clear").click(function() {
  4.     confirm("是否清除文字") && $(this).prev("input").val("");
  5. })
  6. </script>

用戶名密码输入框

  1. <div class="um-input-group">
  2.     <span class="btn ti-user"></span>
  3.     <input type="text" class="form-control" placeholder="Username">
  4. </div>
  6. <div class="um-input-group">
  7.     <span class="btn ti-lock"></span>
  8.     <input type="password" class="form-control" placeholder="password">
  9. </div>

仅底部边框输入框

  1. <div class="um-input-text">
  2.     <span class="ti-lock um-input-left-icon"></span>
  3.     <input type="text" class="form-control" placeholder="Username">
  4. </div>

搜索框

  1. <div class="um-input-group">
  2.     <span class="btn ti-search"></span>
  3.     <input type="search" class="form-control"  placeholder="search">
  4. </div>

文档更新时间: 2018-01-12 16:21