TextField

TextField是一个提供文本输入编辑的组件,可限制大小写的输入。

上图是TextField组件在页面中的呈现,输入框前的文字信息是通过TextField标签属性prompt来定义的。

TextField定义

在screen文件中我们通过<a:textField>标签来定义一个TextField对象。

<a:textField bindTarget="login_dataset" id="user_name_tf" name="user_name"
	prompt="HAP_USERNAME" width="150" typeCase="upper">
    <a:events>
        <a:event handler="login" name="enterdown"/>
    </a:events>
</a:textField>

textField标签可以设置一个id属性,id是组件的唯一标识,我们可以在页面脚本中用$('id')的方法获得该id对应的组件对象,进而可以调用相应的函数方法。

textField标签的bindTarget属性可指定一个dataset对象的id,name属性可指定该dataset其中一个field的名字。这两个属性必须联合使用,其功能是将TextField对象绑定到dataset中的一个field上,进而我们只要对dataset进行操作就能即时反映在TextField上,另外TextField上的文字编辑也会立刻修改dataset中的数据。

events标签定义了需要响应的事件函数,例如enterdown事件,当键盘键入回车键时,TextField会触发enterdown事件,这样我们可以通过配置一个客户端函数login来响应。

function login(){
    var lds = $('login_dataset');
    var record = lds.getCurrentRecord();
    Aurora.request({url:'login.svc', para:record.data, success:function(){
        window.location.href='role_select.screen'
    },scope:this});
}
TextField标签属性

Table 1. 

属性名 用途 默认值 是否必填
bindTarget 组件所绑定的dataset数据集,属性值是dataset的ID。
className 组件的样式表。
emptyText 当组件没有值的时候显示在组件上的提示信息。
id 组件的唯一标识,可用$(id)方法获得组件对象。
marginWidth 组件与窗口之间的宽度差,单位像素(px),可以根据窗口宽度的改变而改变。
name 组件对应dataset数据集中的一个字段field,属性值是字段名。
prompt 输入框前的提示文字,默认调用BM的prompt。
readOnly 设定组件是否只读。

取值 true | false

false
required 设定组件是否必填。

取值 true | false

false
style 组件的样式。
typeCase 组件的大小写输入限制。

取值 upper | lower

width 组件的宽度,单位像素(px)。 150

TextField对象事件

Table 2. 

事件名 用途
blur 失去焦点时触发的事件。
change 文本内容发生改变时触发的事件。
enterdown 敲击回车键时触发的事件。
focus 获得焦点时触发的事件。
keydown 键盘按下时触发的事件。
keypress 键盘敲击时触发的事件。
keyup 键盘抬起时触发的事件。
mouseover 鼠标移到组件上时触发的事件。
mouseout 鼠标移出组件时触发的事件。