TextBox(文本框)
扩展自$.fn.validatebox.defaults,使用$.fn.textbox.defaults重写默认值对象。(该组件自1.4版开始可用)
TextBox(文本框)是一个增强的输入字段组件, 它允许用户非常简单的创建一组表单。它是一个用于构建其他组合控件的基础组件,如:combo,databox、spinner等
依赖关系
用法
通过标签创建文本框。
- <input class="easyui-textbox" data-options="iconCls:'icon-search'" style="width:300px">
使用Javascript创建文本框。
- $('#tb').textbox({
- buttonText:'Search',
- iconCls:'icon-man',
- iconAlign:'left'
- })
属性
属性名 | 属性值类型 | 描述 | 默认值 |
---|---|---|---|
width | number | 组件的宽度。 | auto |
height | number | 组件的高度。 | 22 |
cls | string | 允许给组件添加一个自定义css类名。(该属性自1.5.1版开始可用) | 22 |
prompt | string | 在输入框显示提示消息。 | '' |
value | string | 默认值 | |
type | string | 文本框类型。可用值有:"text"和"password"。 | text |
label | string,selector | 文本框标签。(该属性自1.5版开始可用)
代码示例: $('#email').textbox({ label: 'Email:' |
null |
labelWidth | number | 标签宽度。(该属性自1.5版开始可用) | auto |
labelPosition | string | 标签位置。可用值:'before','after','top'(该属性自1.5版开始可用) | before |
labelAlign | string | 标签对齐方式。可用值:'left','right'(该属性自1.5版开始可用) | left |
multiline | boolean | 定义是否是多行文本框。 | false |
editable | boolean | 定义用户是否可以直接在该字段内输入文字。 | true |
disabled | boolean | 定义是否禁用该字段。 | false |
readonly | boolean | 定义是否将该控件设为只读。 | false |
icons | array | 在文本框删贡献是图标。每一项都有以下属性: iconCls:类型string,图标的class名称; disabled:类型boolean,指明是否禁用该图标; handler:类型function,用于处理点击该图标以后的动作。 代码示例: $('#tb').textbox({ icons: [{ iconCls:'icon-add', handler: function(e){ $(e.data.target).textbox('setValue', 'Something added!'); } },{ iconCls:'icon-remove', handler: function(e){ $(e.data.target).textbox('clear'); } }] }) |
[] |
iconCls | string | 在文本框显示背景图标。 | null |
iconAlign | string | 背景图标的位置。可用值有:"left", "right"。 | right |
iconWidth | number | 图标宽度。 | 18 |
buttonText | string | 文本框附加按钮显示的文本内容。 | |
buttonIcon | string | 文本框附加按钮显示的图标。 | null |
buttonAlign | string | 附加按钮的位置。可用值有:"left", "right"。 | right |
事件
事件扩展自 validatebox,以下是新增的文本框事件。
事件名 | 参数 | 描述 |
---|---|---|
onChange | newValue, oldValue | 在字段值更改的时候触发。 |
onResize | width, height | 在文本框大小改变的时候触发。 |
onClickButton | none | 在用户点击按钮的时候触发。 |
onClickIcon | index | 在用户点击图标的时候触发。 |
方法
方法扩展自 validatebox,以下是新增的文本框方法。
方法名 | 方法属性 | 描述 |
---|---|---|
options | none | 返回属性对象。 |
textbox | none |
返回文本框对象。 代码示例: var t = $('#tt'); t.textbox('textbox').bind('keydown', function(e){ if (e.keyCode == 13){ // 当按下回车键时接受输入的值。 t.textbox('setValue', $(this).val()); } }); |
button | none | 返回按钮对象。 |
destroy | none | 销毁文本框组件。 |
resize | width | 调整文本框组件宽度。 |
disable | none | 禁用组件。 |
enable | none | 启用组件。 |
readonly | mode | 启用/禁用只读模式。
代码示例: $('#tb').textbox('readonly'); // 启用只读模式 $('#tb').textbox('readonly',true); // 启用只读模式 $('#tb').textbox('readonly',false); // 禁用只读模式 |
clear | none | 清除组件中的值。 |
reset | none | 重置组件中的值。 |
initValue | value | 初始化组件值。调用该方法不会触发“onChange”事件。(该方法自1.4.5版开始可用) |
setText | text | 设置显示的文本值。 |
getText | none | 获取显示的文本值。 |
setValue | value | 设置组件的值。 |
getValue | none | 获取组件的值。 |
getIcon | index | 获取指定图标对象。 |