textbox(文本框) · easyUI

### TextBox（文本框）扩展自$.fn.validatebox.defaults，使用$.fn.textbox.defaults重写默认值对象。 TextBox(文本框)是一个增强的输入字段组件，它允许用户非常简单的创建一组表单。它是一个用于构建其他组合控件的基础组件，如：combo，databox、spinner等 ![](https://box.kancloud.cn/2016-07-19_578d91358205f.png) #### 依赖关系 - [validatebox](#) - [linkbutton](#) #### #### 用法通过标签创建验证框。 1. **<input**class="easyui-textbox"data-options="iconCls:'icon-search'"style="width:300px"> <input class="easyui-textbox" data-options="iconCls:'icon-search'" style="width:300px"> 使用Javascript创建验证框。 ~~~ <input id="tb" type="text" style="width:300px"> ~~~ <input id="tb" type="text" style="width:300px"> 1. $('#tb').textbox({ 1. buttonText:'Search', 1. iconCls:'icon-man', 1. iconAlign:'left' 1. }) $('#tb').textbox({ buttonText:'Search', iconCls:'icon-man', iconAlign:'left' }) #### #### 属性 <table class="doc-table"><tbody><tr><th><strong>属性名</strong></th> <th><strong>属性值类型</strong></th> <th><strong>描述</strong></th> <th><strong>默认值</strong></th></tr><tr><td>width</td> <td>number</td> <td>组件的宽度。</td> <td>auto</td></tr><tr><td>height</td> <td>number</td> <td>组件的高度。</td> <td>22</td></tr><tr><td>prompt</td> <td>string</td> <td><font color="#000000">在输入框显示提示消息。</font></td> <td>''</td></tr><tr><td>value</td> <td>string</td> <td>默认值</td> <td/></tr><tr><td>type</td> <td>string</td> <td>文本框类型。可用值有："text"和"password"。</td> <td>text</td></tr><tr><td>multiline</td> <td>boolean</td> <td>定义是否是多行文本框。</td> <td>false</td></tr><tr/><tr><td>editable</td> <td>boolean</td> <td>定义用户是否可以直接在该字段内输入文字。</td> <td>true</td></tr><tr/><tr><td>disabled</td> <td>boolean</td> <td>定义是否禁用该字段。</td> <td>false</td></tr><tr><td>readonly</td> <td>boolean</td> <td>定义是否将该控件设为只读。</td> <td>false</td></tr><tr><td>icons</td> <td>array</td> <td>在文本框删贡献是图标。每一项都有以下属性：<br/>iconCls：类型string，图标的class名称；<br/>disabled：类型boolean，指明是否禁用该图标；<br/>handler：类型function，用于处理点击该图标以后的动作。 <p>代码示例：</p><pre>$('#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'); } }] }) </pre></td> <td>[]</td></tr><tr><td>iconCls</td> <td>string</td> <td>在文本框显示背景图标。</td> <td>null</td></tr><tr><td>iconAlign</td> <td>string</td> <td>背景图标的位置。可用值有："left", "right"。</td> <td>right</td></tr><tr><td>iconWidth</td> <td>number</td> <td>图标宽度。</td> <td>18</td></tr><tr><td>buttonText</td> <td>string</td> <td>文本框附加按钮显示的文本内容。</td> <td/></tr><tr><td>buttonIcon</td> <td>string</td> <td>文本框附加按钮显示的图标。</td> <td>null</td></tr><tr><td>buttonAlign</td> <td>string</td> <td>附加按钮的位置。可用值有："left", "right"。</td> <td>right</td></tr></tbody></table> #### #### 事件事件扩展自 [validatebox](#)，以下是新增的文本框事件。 | **事件名** | **参数** | **描述** | |-----|-----|-----| | onChange | newValue, oldValue | 在字段值更改的时候触发。 | | onResize | width, height | 在文本框大小改变的时候触发。 | | onClickButton | none | 在用户点击按钮的时候触发。 | | onClickIcon | index | 在用户点击图标的时候触发。 | #### 方法方法扩展自 [validatebox](#)，以下是新增的文本框方法。 <table class="doc-table"><tbody><tr><th><strong>方法名</strong></th> <th><strong>方法属性</strong></th> <th><strong>描述</strong></th></tr><tr><td>options</td> <td>none</td> <td>返回属性对象。</td></tr><tr><td>textbox</td> <td>none</td> <td>返回文本框对象。</td></tr><tr><td>button</td> <td>none</td> <td>返回按钮对象。</td></tr><tr><td>destroy</td> <td>none</td> <td>销毁文本框组件。</td></tr><tr><td>resize</td> <td>width</td> <td>调整文本框组件宽度。</td></tr><tr><td>disable</td> <td>none</td> <td>禁用组件。</td></tr><tr><td>enable</td> <td>none</td> <td>启用组件。</td></tr><tr><td>readonly</td> <td>mode</td> <td>启用/禁用只读模式。 <p>代码示例：</p><pre>$('#tb').textbox('readonly'); // 启用只读模式 $('#tb').textbox('readonly',true); // 启用只读模式 $('#tb').textbox('readonly',false); // 禁用只读模式</pre></td></tr><tr><td>clear</td> <td>none</td> <td>清除组件中的值。</td></tr><tr><td>reset</td> <td>none</td> <td>重置组件中的值。</td></tr><tr><td>setText</td> <td>text</td> <td>设置显示的文本值。</td></tr><tr><td>getText</td> <td>none</td> <td>获取显示的文本值。</td></tr><tr><td>setValue</td> <td>value</td> <td>设置组件的值。</td></tr><tr><td>getValue</td> <td>none</td> <td>获取组件的值。</td></tr><tr><td>getIcon</td> <td>index</td> <td>获取指定图标对象。</td></tr></tbody></table>