23. EasyUI textbox（文本框）

扩展自.fn.validatebox.defaults，使用.fn.textbox.defaults重写默认值对象。（该组件自1.4版开始可用）

TextBox(文本框)是一个增强的输入字段组件，它允许用户非常简单的创建一组表单。它是一个用于构建其他组合控件的基础组件，如：combo，databox、spinner等

依赖关系

validatebox
linkbutton

用法

通过标签创建文本框。

<input class="easyui-textbox" data-options="iconCls:'icon-search'" style="width:300px">

使用Javascript创建文本框。

<input id="tb" type="text" style="width:300px">
        
$('#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版开始可用）	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，用于处理点击该图标以后的动作。	[]
iconCls	string	在文本框显示背景图标。	null
iconAlign	string	背景图标的位置。可用值有：“left”, “right”。	right
iconWidth	number	图标宽度。	18
buttonText	string	文本框附加按钮显示的文本内容。
buttonIcon	string	文本框附加按钮显示的图标。	null
buttonAlign	string	附加按钮的位置。可用值有：“left”, “right”。	right

代码示例：

label

 	$('#email').textbox({
    	label: 'Email:'
    	labelPosition: 'top',
    	prompt: 'Ent'
 	});

icons

$('#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');
                }
            }]
    })

事件

事件扩展自validatebox，以下是新增的文本框事件。

事件名	事件参数	描述
onChange	newValue, oldValue	在字段值更改的时候触发。
onResize	width, height	在文本框大小改变的时候触发。
onClickButton	none	在用户点击按钮的时候触发。
onClickIcon	index	在用户点击图标的时候触发。

方法

方法扩展自validatebox，以下是新增的文本框方法。

方法名	方法参数	描述
options	none	返回属性对象。
textbox	none	返回文本框对象。
button	none	返回按钮对象。
destroy	none	销毁文本框组件。
resize	width	调整文本框组件宽度。
disable	none	禁用组件。
enable	none	启用组件。
readonly	mode	启用/禁用只读模式。
clear	none	清除组件中的值。
reset	none	重置组件中的值。
initValue	value	初始化组件值。调用该方法不会触发“onChange”事件。（该方法自1.4.5版开始可用）
setText	text	设置显示的文本值。
getText	none	获取显示的文本值。
setValue	value	设置组件的值。
getValue	none	获取组件的值。
getIcon	index	获取指定图标对象。

代码示例：

textbox

var t = $('#tt');
t.textbox('textbox').bind('keydown', function(e){
    	if (e.keyCode == 13){	// 当按下回车键时接受输入的值。
		t.textbox('setValue', $(this).val());
	}
});

readonly

$('#tb').textbox('readonly'); // 启用只读模式
$('#tb').textbox('readonly',true); // 启用只读模式
$('#tb').textbox('readonly',false); // 禁用只读模式