apicloud （第三篇 在打开搜索页面时，自动弹出手机键盘）

1、官方文档介绍：https://docs.apicloud.com/Client-API/UI-Layout/UIInput    大家可仔细阅读一遍。

2、模块概述：

  某些App具有打开某一页面即可默认弹出键盘的功能，如某些登陆授权，评论页面。但是一个纯html的输入框标签，无法 实现这一功能。为满足APICloud平台开发者对这一功能的需求，特推出了UIInput模块 
  UIInput是一个输入框模块，开发者可通过配置相应参数来控制输入框自动获取焦点，并弹出键盘。同普通的UI类的模块一样，本模块也可通过rect来设置其位置和大小，通过样式参数设置其样式。为增强输入框功能，模块开放了keyboardType参数，开发者可通过设置该参数来控制其键盘类型。

3、在项目中添加 UIInput  模块

在apicloud 控制台中，添加模块如下：

4、

<script type="text/javascript">
	var winH; //window窗口的高
	var eleinputusername = $api.byId('inputusername');
	var eleinputpassword = $api.byId('inputpassword');
	var y = $api.offset(eleinputusername).t + 7; //定位手机号输入框的位置y
	var y2 = $api.offset(eleinputpassword).t + 7; //定位密码输入框的位置y
	var passWordTop; //计算密码框底部到屏幕底部的距离
	var UIInput;
	apiready = function() {
		winH = api.winHeight;
		passWordTop = winH - $api.offset(eleinputpassword).t - $api.offset(eleinputpassword).h;
		UIInput = api.require('UIInput');
		UIInput_open();
		UIInput_open2();
	}

	function UIInput_open() {
		UIInput.open({
			rect: {
				x: 44,
				y: y,
				w: api.winWidth - 88,
				h: 30
			},
			styles: {
				bgColor: '#fff',
				size: 14,
				color: '#000',
				placeholder: {
					color: '#ccc'
				}
			},
			autoFocus: true,  //注意是true
			maxRows: 1,
			placeholder: '请输入手机号',
			keyboardType: 'number',
			inputType: 'text',
			fixedOn: api.frameName,
			fixed: false
		}, function(ret, err) {
			if (ret) {
				console.log(JSON.stringify(ret));
				id = ret.id;
				UIInput.addEventListener({
					id: id,
					name: 'resignFirstResponder'
				}, function() {

				});
				UIInput.addEventListener({
					id: id,
					name: 'becomeFirstResponder'
				}, function(ret) {
					//console.log("输入框获得焦点！" + api.winHeight + ret.keyboardHeight);
					if (ret.keyboardHeight) {
            if(api.systemType == 'android' || api.systemType == 'Android'){
							fnscoll(ret.keyboardHeight);
						}
					}
				});
			}
		});
	}

	function UIInput_open2() {
		var UIInput = api.require('UIInput');
		UIInput.open({
			rect: {
				x: 44,
				y: y2,
				w: api.winWidth - 88,
				h: 30
			},
			styles: {
				bgColor: '#fff',
				size: 14,
				color: '#000',
				placeholder: {
					color: '#ccc'
				}
			},
			autoFocus: true,     //注意是true
			maxRows: 1,
			placeholder: '请输入密码',
			keyboardType: 'default',
			inputType: 'password',
			fixedOn: api.frameName,
			fixed: false
		}, function(ret, err) {
			if (ret) {
				console.log(JSON.stringify(ret));
				id2 = ret.id;
				UIInput.addEventListener({
					id: id2,
					name: 'resignFirstResponder'
				}, function() {
					console.log("输入框失去焦点！");
				});
				UIInput.addEventListener({
					id: id2,
					name: 'becomeFirstResponder'
				}, function(ret) {
					console.log("输入框获得焦点！" + api.winHeight + ret.keyboardHeight);
					if (ret.keyboardHeight) {
						if(api.systemType == 'android' || api.systemType == 'Android'){
							fnscoll(ret.keyboardHeight);
						}
					}
				});
			}
		});
	}


	function UIInput_value(oneid) {
		UIInput.value({
			id: oneid
		}, function(ret, err) {
			if (ret) {
				console.log(JSON.stringify(ret));
			}
		});
	}

	function closeUIIput(id) {
		UIInput.close({
			id: id
		});
	}

	//滚动页面防止别键盘遮挡,仅Android需要
	function fnscoll(L) {
		console.log(L + ':' + passWordTop);
		if (L > passWordTop) {
			document.body.scrollTop = L - passWordTop; //滚动距离=键盘高度-密码框距屏幕底部距离
		}
	}

	function fnclear() {
		UIInput.value({
			id: id,
			msg: ''
		}, function(ret, err) {
			if (ret) {
				console.log(JSON.stringify(ret));
			}
		});
	}

	function fnlogin() {
		UIInput_value(id);
		UIInput_value(id2);
	}
</script>

5、autoFocus：

 

这样就可以实现，当从别的页面跳转到搜索页面时，会自动弹起键盘。（demo在官方文档中已经展示）