[TOC]
![document/2015-08-28/55dfbd4a5ac50](https://box.kancloud.cn/document_2015-08-28_55dfbd4a5ac50.jpg)
UIInput 是一个输入框模块
1. 输入框可自动获取焦点,并弹出键盘
2. 可自定义输入框的位置及样式
3. 监听输入框内容的变化
4. 用于实现搜索框或其它输入框的 autofocus 及弹出键盘功能
# 心得
1. open的关键是位置
2. 通过function(ret){}来执行操作
3. 比如商城的搜索框
# open
打开输入框,注意:**调用 open 接口的元素,不能加 tapmode 属性**
~~~
var UIInput = api.require('UIInput');
UIInput.open({
rect: {
x: 0,
y: 0,
w: 320,
h: 40
},
styles: {
bgColor: '#fff',
size: 14,
color: '#000',
placeholder: {
color: '#ccc'
}
},
maxRows: 1,
placeholder: '这是一个输入框',
keyboardType: 'number',
fixedOn: ''
}, function(ret){
status: true,
eventType: 'show'
//show(模块打开成功)
//change(输入框内容改变)
//search(点击键盘的搜索按钮)
if(ret.status){
alert(ret.eventType);
}
});
~~~
> if(ret.eventType == change) 执行关键词对比
> if(ret.eventType == search) 执行搜索,
> 通过value的ret.msg得到输入的内容,传递给其他方法
> 完成搜索
# close
~~~
var UIInput = api.require('UIInput');
UIInput.close();
~~~
# show
~~~
var UIInput = api.require('UIInput');
UIInput.show();
~~~
# hide
~~~
var UIInput = api.require('UIInput');
UIInput.hide();
~~~
# value
~~~
var UIInput = api.require('UIInput');
//设置输入框的值
UIInput.value({
msg: '设置输入框的值'
});
//获取输入框的值
UIInput.value(function(ret, err){
if(ret.status){
api.alert({msg: ret.msg});
}
});
~~~
#insertValue
~~~
var UIInput = api.require('UIInput');
//设置输入框的值
UIInput.value({
msg: '设置输入框的值'
});
//获取输入框的值
UIInput.value(function(ret, err){
if(ret.status){
api.alert({msg: ret.msg});
}
});
~~~