UIInput 输入框模块效果展示

uoaccw

本帖最后由 uoaccw 于 2018-12-28 20:41 编辑

模块概述
某些 App 具有打开某一页面即可默认弹出键盘的功能，如某些登陆授权、评论页面。但是一个纯 html 的输入框标签，无法实现这一功能。为满足 APICloud 平台开发者对这一功能的需求，特推出了 UIInput 模块。

UIInput 是一个输入框模块，开发者可通过配置相应参数来控制输入框自动获取焦点，并弹出键盘。同普通的 UI 类的模块一样，本模块也可通过 rect 来设置其位置和大小，通过 styles参数设置其样式。为增强输入框功能，模块开放了 keyboardType 参数，开发者可通过设置该参数来控制其键盘类型。

模块文档地址：

https://docs.apicloud.com/Client-API/UI-Layout/UIInput

demo效果图：

附件为widget形式代码包。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>title</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<link rel="stylesheet" type="text/css" href="../css/aui.css" />
<style>
html,
body {
background-color: #fff;
}
.content {
height: 300px;
width: 100%;
}
.login {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="content">
</div>
<ul class="aui-list aui-form-list">
<li id='inputusername' class="aui-list-item">
<div class="aui-list-item-inner">
<div class="aui-list-item-label-icon">
<i class="aui-iconfont aui-icon-mobile"></i>
</div>
<div class="aui-list-item-input">
</div>
<div tapmode class="aui-list-item-label-icon" onclick="fnclear()">
<i class="aui-iconfont aui-icon-close"></i>
</div>
</div>
</li>
<li id='inputpassword' class="aui-list-item">
<div class="aui-list-item-inner">
<div class="aui-list-item-label-icon">
<i class="aui-iconfont aui-icon-lock"></i>
</div>
<div class="aui-list-item-input">
</div>
</div>
</li>
</ul>
<div tapmode class="aui-btn aui-btn-block login" onclick="fnlogin()">登录</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<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: false,
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: false,
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>
</html>

复制代码

jin正恩 · 回复于2018-10-14 11:49:19

赞刚好很需要这个

LuckTest · 回复于2018-11-28 10:39:36

我初始化了,但没有显示,自动弹出也没用,弹出了,点下输入框的位置,有隐藏了

fondfree

大佬，在吗？我安卓没配置也没有被键盘遮挡。但是IOS会。。。IOS被键盘遮挡怎么解决？

vitals

keyboardType:

类型：字符串
描述：（可选项）输入框获取焦点时，弹出的键盘类型；
默认值：'default'
取值范围：
default（默认键盘）
number（数字键盘）
search（搜索键盘，Android只有在单行模式下支持）
next（下一项，Android只有在单行模式下支持）
send（发送，Android只有在单行模式下支持）
done（完成，Android只有在单行模式下支持）

请教管理员一下，next怎么用？想用这个，但是点击没有任何反馈，怎么处理呢？

vitals

顶一下，怎么没有人回呢？

赵德柱还是罩不住

其实我想问下的是,这怎么让uiinput在密码状态上,有默认值

傲北

谢谢正在找这个

马浩川 · 回复于2019-11-12 15:51:40

vitals 发表于 2019-2-22 17:37
keyboardType:

类型：字符串

eventType: 'show'             //字符串类型；交互事件类型，
                                 //取值范围：
                                 //show（模块打开成功）
                                 //change（输入框内容改变）
                                 //search（点击键盘的搜索按钮）
                                 //send（点击键盘的发送按钮，暂仅支持ios平台）
                                 //done（点击键盘的确定按钮，暂仅支持ios平台）
这是有回调的类型

不嫁迪威龙 · 回复于2019-11-29 17:14:53

那个右边清除输入的小叉叉怎么调出来