BUI

其它版本:

API for BUI 1.6.x

Show:

bui.input Class

Module: UI

Available since 1.5.0

输入框交互

预览地址: demo

方法说明:

value: 获取值

Constructor

bui.input

(
  • option
)

Defined in src/scripts/ui/bui.input.js:9

Available since 1.5.0

Parameters:

  • option Object

    [description]

    • id String

      [事件的父级]

    • [target] String optional

      目标是input

    • [onChange] Function optional

      1.5.6新增 改变以后触发,无需修改event的参数

    • [event] String optional

      类型,默认“input” || "change"

    • [iconClass] String optional

      1.5.6改为支持多图标样式名,默认:".icon-remove", 多个格式应该为: ".newfont.newfont-remove"

    • [showIcon] Boolean optional

      是否显示图标,会影响到callback回调, 默认: true(显示图标)|false(隐藏图标)

    • [showLength] Boolean optional

      是否显示长度,结合maxLength参数, 默认: false(隐藏长度)|true(显示长度)

    • [maxLength] Number optional

      输入的长度, 0不限制 ,默认:0

    • [onInput] Function optional

      输入的回调

    • [onBlur] Function optional

      离开的回调, 必须返回 true 的时候, value方法才能拿到值. 如果 return fasle, 则value 方法拿不到值,用于校验

    • [onFocus] Function optional

      聚焦的回调

    • [onBeforeInit] Function optional

      1.5.1新增 初始化前触发

    • [onInited] Function optional

      1.5.1新增 初始化以后触发

    • [callback] Function optional

      点击图标的回调

Example:

html:

   <div class="bui-input password-input">
                                           <input id="password" type="password" placeholder="密码">
                                       </div>
                                    
                                      js:
                                    
                                       var uiInput = bui.input({
                                           id: ".password-input",
                                           callback: function (e) {
                                               // 点击删除按钮清空
                                               $("#password").val('');
                                               $(e.target).hide();
                                           }
                                       })
                                    

Item Index

Events

Methods

empty

()

清空值

Example:

       uiInput.epmty();
                                                

init

(
  • [option]
)
chainable

初始化方法,用于重新初始化结构,事件只初始化一次

Parameters:

  • [option] Object optional

    参数控件本身

option

(
  • [key]
  • [value]
)
chainable

获取设置参数

Parameters:

  • [key] String | object optional

    不传则获取所有参数, 类型为string,没有第2个参数则获取某个参数

  • [value] String | number | boolean | function optional

    设置参数的时候要传,设置多个参数不用传,获取参数的时候也不用传

Example:

       //获取所有参数
                                                       var option = uiInput.option();
                                                
                                                       //获取某个参数
                                                       var id = uiInput.option( "id" );
                                                

reset

()

Defined in src/scripts/ui/bui.input.js:285

Available since 1.6.2

重置

Example:

       uiInput.reset();
                                                

toggleType

()

切换text跟password, 用于密码的展示

Example:

       uiInput.toggleType();
                                                

value

()

获取并设置值, 只能单个操作

Example:

       var val = uiInput.value();
                                                

widget

(
  • [name]
)

获取依赖的控件

Parameters:

  • [name] String optional

    依赖控件名

Example:

       //获取依赖控件
                                                       var uiInputWidget = uiInput.widget();
                                                

Events

off

为控件取消绑定事件

Event Payload:

  • [type] String optional

    事件类型: "click"(搜索时触发) | "focus"(移除关键字时触发) | "input"(每次输入时触发)

  • [callback] Function optional

    绑定的事件, this 为当前点击的菜单

Example:

       uiInput.off("input");
                                                

on

为控件绑定事件

Event Payload:

  • [type] String optional

    事件类型: "click"(搜索时触发) | "focus"(移除关键字时触发) | "input"(每次输入时触发)

  • [callback] Function optional

    绑定的事件, this 为当前点击的菜单

Example:

       uiInput.on("input",function () {
                                                           // 点击的菜单
                                                           console.log(this);
                                                       });