使用须知
如何开始
安装
全局元素
样式重置
文字
颜色
徽章
提示框
表格
图标
栅格
原生组件
Panel
Accordion
Tabs
Layout
DataGrid
DataList
PropertyGrid
Tree
TreeGrid
LinkButton
Menu
MenuButton
SplitButton
SwitchButton
TabButton
Pagination
ProgressBar
SearchBox
Form
CheckBox
RadioBox
TextBox
PasswordBox
FileBox
TagBox
Combo
ComboBox
ComboGrid
ComboTree
ComboTreeGrid
ComboFilter
NumberBox
NumberSpinner
Calendar
DateBox
DateRangeBox
DateTimeBox
DateTimeRangeBox
TimeSpinner
DateTimeSpinner
Slider
ValidateBox
ImagesBox
Window
Dialog
Messager
Draggable
Droppable
Resizable
Tooltip
MaskedBox
扩展组件
头像
上传
时间轴
聊天
用户面板
消息面板
统计数据面板
Echart面板
圆形统计图
评论
相册
评分
文件
滚动条
二维码
条形码
天气
AT
编辑器
课程表
日程表
项目管理
客户管理
浏览器
FAQ
兼容插件
IconFont
Font Awesome
Ueditor
Ckeditor
Echarts
Plupload
Cropper
BaiduMap
AMap
Colpick
Nprogress
Gantt
GanttEditor
Raty
WebUploader
匿名
匿名 您还未登录

TextBox

Document
Native
Basic
Clear Icon
Custom TextBox
TextBox with Icons
TextBox with Button
TextBox Size
Multiline TextBox
Fluid TextBox
Plus
Extend

TextBox Document

扩展自$.fn.validatebox.defaults,使用$.fn.textbox.defaults重写默认值对象。(该组件自1.4版开始可用)
TextBox(文本框)是一个增强的输入字段组件, 它允许用户非常简单的创建一组表单。它是一个用于构建其他组合控件的基础组件,如:combo,databox、spinner等

文档汉化:

汉化人:王锦阳
汉化语言:简体中文
个人博客:http://blog.sina.com.cn/richie696

依赖关系:

validatebox / linkbutton

用法:

通过标签创建文本框。

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

使用Javascript创建文本框。

					
<input id="tb" type="text" style="width:300px">
<script type="text/javascript">
$('#tb').textbox({    
    buttonText:'Search',    
    iconCls:'icon-man', 
    iconAlign:'left'       
})
</script>
					
				

属性:

属性名 属性值类型 描述 默认值
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:',
  labelPosition: 'top',
  prompt: 'Ent'
});
							
						
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 获取指定图标对象。