easyui-textbox

电玩女神 2022-07-15 14:15 220阅读 0赞

# [easyui-textbox][] #

TextBox

扩展自 $.fn.validatebox.defaults. 重写 $.fn.textbox.defaults.

TextBox 是加强的输入控件，使我们建设表单更加快捷. 是一些复杂控件的基础控件，比如 combo,datebox,spinner,等等.

id="iframe\_0.6925237942934468" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://www.jeasyui.com/documentation/images/textbox.png?\_=4368067%22%20style=%22border:none;max-width:848px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe\_0.6925237942934468',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" frameborder="0" scrolling="no" style="margin: 0px; padding: 0px; border-width: initial; border-style: none; width: 292px; height: 113px;">

#### 依赖 ####

*  validatebox
 *  linkbutton

#### 实例 ####

html创建方式

javascript创建方式

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

#### 属性 ####

属性拓展自 validatebox 控件，下面是textbox新添加的属性:

<table style="margin:0px; padding:0px; border-collapse:collapse; border-spacing:0px; max-width:850px; border:1px solid silver; word-break:break-word"> 
 <tbody style="margin:0px; padding:0px"> 
  <tr style="margin:0px; padding:0px"> 
   <th style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> <span style="margin:0px; padding:0px">Name</span></th> 
   <th style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> <span style="margin:0px; padding:0px">Type</span></th> 
   <th style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> <span style="margin:0px; padding:0px">Description</span></th> 
   <th style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> <span style="margin:0px; padding:0px">Default</span></th> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> width</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> number</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> The width of the component.</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> auto</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> height</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> number</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> The height of the component.</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 22</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> prompt</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> string</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> The prompt message to be displayed in input box.</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> ''</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> value</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> string</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> The default value.</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> &nbsp;</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> type</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> string</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> The textbox type. Possible values are 'text' and 'password'.</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> text</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> multiline</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> boolean</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Defines if this is a multiline textbox.</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> false</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> editable</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> boolean</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Defines if user can type text directly into the field.</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> true</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> disabled</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> boolean</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Defines if to disable the field.</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> false</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> readonly</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> boolean</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Defines if the component is read-only.</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> false</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> icons</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> array</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> The icons attached to the textbox. Each item has the following properties:<br style="margin:0px; padding:0px"> iconCls: string, the icon class.<br style="margin:0px; padding:0px"> disabled: boolean, indicate if the icon is disabled.<br style="margin:0px; padding:0px"> handler: function, the function to process the clicking action on this icon. <p style="margin:10px auto; padding-top:0px; padding-bottom:0px">&nbsp;</p> <p style="margin:10px auto; padding-top:0px; padding-bottom:0px">Code example:</p> <pre style="margin-top:0px; margin-bottom:0px; padding:0px; white-space:pre-wrap; word-wrap:break-word">$('#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 style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> []</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> iconCls</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> string</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> The background icon displayed on the textbox.</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> null</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> iconAlign</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> string</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Position of the icons. Possible values are 'left','right'.</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> right</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> iconWidth</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> number</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> The icon width.</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 18</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> buttonText</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> string</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> The displaying text of button that attached to the textbox.</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> &nbsp;</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> buttonIcon</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> string</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> The displaying icon of button that attached to the textbox.</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> null</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> buttonAlign</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> string</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Position of the button. Possible values are 'left','right'.</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> right</td> 
  </tr> 
 </tbody> 
</table>

#### 事件 ####

事件拓展自 validatebox 控件，下面是textbox新添加的事件:

#### 方法 ####

方法拓展自 validatebox 控件，下面是textbox新添加的方法:

<table style="margin:0px; padding:0px; border-collapse:collapse; border-spacing:0px; max-width:850px; border:1px solid silver; word-break:break-word"> 
 <tbody style="margin:0px; padding:0px"> 
  <tr style="margin:0px; padding:0px"> 
   <th style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> <span style="margin:0px; padding:0px">Name</span></th> 
   <th style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> <span style="margin:0px; padding:0px">Parameter</span></th> 
   <th style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> <span style="margin:0px; padding:0px">Description</span></th> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> options</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> none</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Return the options object.</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> textbox</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> none</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Return the textbox object.</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> button</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> none</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Return the button object.</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> destroy</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> none</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Destroy the textbox component.</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> resize</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> width</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Resize the component width.</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> disable</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> none</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Disable the component.</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> enable</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> none</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Enable the component.</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> readonly</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> mode</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Enable/Disable readonly mode. <p style="margin:10px auto; padding-top:0px; padding-bottom:0px">&nbsp;</p> <p style="margin:10px auto; padding-top:0px; padding-bottom:0px">Code example:</p> <pre style="margin-top:0px; margin-bottom:0px; padding:0px; white-space:pre-wrap; word-wrap:break-word">$('#tb').textbox('readonly');	// enable readonly mode
$('#tb').textbox('readonly',true);	// eanble readonly mode
$('#tb').textbox('readonly',false);	// disable readonly mode
</pre> </td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> clear</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> none</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Clear the component value.</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> reset</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> none</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Reset the component value.</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> setText</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> text</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Set the displaying text value.</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> getText</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> none</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Get the displaying text value.</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> setValue</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> value</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Set the component value.</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> getValue</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> none</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Get the component value.</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> getIcon</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> index</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Get specified icon object.</td> 
  </tr> 
 </tbody> 
</table>

FileBox

拓展自 $.fn.textbox.defaults. 重写 $.fn.filebox.defaults.

由于浏览器安全问题, 一些方法 比如 'setValue' 不能使用filebox 组件.

id="iframe\_0.46444635703829973" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://www.jeasyui.com/documentation/images/filebox.png?\_=4368067%22%20style=%22border:none;max-width:848px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe\_0.46444635703829973',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" frameborder="0" scrolling="no" style="margin: 0px; padding: 0px; border-width: initial; border-style: none; width: 414px; height: 41px;">

#### 依赖 ####

*  textbox

#### 实例 ####

html创建方式

javascript创建方式

<input id="fb" type="text" style="width:300px"> 
    $('#fb').filebox({ 
     buttonText: 'Choose File', 
     buttonAlign: 'left' 
    })

#### 属性 ####

属性拓展自 textbox, 下面是 filebox新增属性.

#### 事件 ####

事件拓展自 textbox.

#### 方法 ####

方法拓展自 textbox.