logo

iMAG移动应用开发指南

InputText

文本输入框,用来输入单行文本

标签

标签名 描述 说明
input-text 文本框标签 用来输入单行文本

属性

属性名 取值 描述
id String id编码
style String
input-text样式,包括:
name String 表单项名称
value String 表单项的值
remember Boolean 表单提交时是否记住value
true:记住value
false:不记住value,默认值
placeholder String 输入提示
maxlength Integer >= 0 输入最大长度
readonly Boolean 只读状态
true:只读状态
false:非只读状态,默认值
disabled Boolean 禁用状态
true:禁用状态
false:非禁用状态,默认值
onclick Javascript 点击时触发的脚本
onchange Javascript 内容改变时触发的脚本
onfocus Javascript 获得焦点时触发的脚本
onblur Javascript 失去焦点时触发的脚本

方法

方法名 参数 返回值 描述
css(name:String) name:样式名称 String 根据样式名称得到样式的值
css(name:String, value:String)
name:样式名称
value:样式值
None 设置单个样式
css(style:String) style:样式文本,多个样式用分号分隔 None 设置多个样式
css(style:Object) style:样式对象,键值对形式 None 设置多个样式

控件详解

● 文本框

<input type="text" name="username" value="Terry"/>

效果:

● 带特殊符号的文本框

<input type="text" name="username"><![CDATA[<b>Terry</b>&nbsp;]]></input>

效果:

说明:当value里含有特殊符号<、&时要放到CDATA

● 带提示的文本框

<input type="text" name="username" placeholder="请输入用户名"/>

效果:

说明:设置样式style="placeholder-color:blue"可以控制placeholder的文本颜色

● 只读文本框

<input type="text" name="username" readonly="true" value="Terry"/>

效果:

● 禁用文本框

<input type="text" name="username" disabled="true" value="Terry"/>

效果:

● 输入长度限制

<input type="text" name="username" maxlength="5"/>

效果:

● 透明背景的文本框

<input type="text" name="username" value="Terry" style="background:null,null"/>

效果:

● 设置文本对齐方式

<input type="text" name="username" value="Terry" style="text-align:center"/>

设置样式text-align:centertext-align:right可以让文本居中和居右对齐

● 修改文本框的值

$('test_input').value = 'Terry';

● 将文本框设为只读

$('test_input').readonly = true;

● 将文本框设为禁用

$('test_input').disabled = true;

● 修改文本框样式

$('test_input').css('color:red; font-size:20; font-weight:bold');
$('test_input').css({'color':'white', 'background':'darkgray', 'corner-radius':'5'});

● 获取焦点事件

<input type="text" onfocus="hint(this.value)" value="测试文本"/>

● 创建文本框

var input = $C('<input type="text" name="username" value="Terry"/>');
$('test_item').add(input);

示例下载

点此下载input-text相关的示例代码:imag-input-text.zip