UIAdaptiveInput 模块demo（输入框）

uoaccw

UIAdaptiveInput 是一个输入框，开发者可根据需求自定义其样式。该模块能巧妙的适配键盘高度，自定调整位置，始终紧贴软键盘
本模块在iOS平台上支持最低版本为 iOS9

文档地址：
https://docs.apicloud.com/Client-API/UI-Layout/UIAdaptiveInput

<!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" />
<title>title</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
html,
body {
height: 1000px;
}
button {
margin: 10px;
}
input {
margin-top: 200px;
}
.content {
margin: 60px;
}
</style>
</head>
<body>
<div class="content">
<button type="button" onclick="fnclose()" name="button">fnclose</button>
<button type="button" onclick="fnshow()" name="button">fnshow</button>
<button type="button" onclick="fnhide()" name="button">fnhide</button>
<button type="button" onclick="fnsetValue()" name="button">fnsetValue</button>
<button type="button" onclick="fninsertValue()" name="button">fninsertValue</button>
<button type="button" onclick="fnsetPlaceholder()" name="button">fnsetPlaceholder</button>
<button type="button" onclick="fnbecomeFirstResponder()" name="button">fnbecomeFirstResponder</button>
<button type="button" onclick="fnresignFirstResponder()" name="button">fnresignFirstResponder</button>
</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
var UIAdaptiveInput;
apiready = function() {
//Android 不同键盘需监听不同事件
UIAdaptiveInput = api.require('UIAdaptiveInput');
UIAdaptiveInput.addEventListener({
name: 'search' // Android 上 name可取值send,search,done,return,next
}, function(ret) {
console.log('search:' + JSON.stringify(ret));
});
// iOS 不同键盘类型都是监听return事件
UIAdaptiveInput.addEventListener({
name: 'return'
}, function(ret) {
console.log('search:' + JSON.stringify(ret));
});
UIAdaptiveInput.addEventListener({
name: 'focus'
}, function(ret) {
console.log('focus:' + JSON.stringify(ret));
});
UIAdaptiveInput.addEventListener({
name: 'changeValue'
}, function(ret) {
console.log('changeValue:' + JSON.stringify(ret));
});
UIAdaptiveInput.addEventListener({
name: 'changeHeight'
}, function(ret) {
console.log('changeHeight:' + JSON.stringify(ret));
});
UIAdaptiveInput_open();
};
function UIAdaptiveInput_open() {
UIAdaptiveInput.open({
rect: {
x: 10,
y: 450,
w: api.winWidth - 20,
h: 35
},
styles: {
size: 14,
bgColor: '#FFF',
color: '#000',
borderColor: '#000',
placeholderColor: '#000',
marginBottom: 100
},
adaptive: {
maxLines: 1,
maxLength: 1000,
direction: 'down',
layoutInBottom: true
},
placeholder: '请输入文本...',
autoFocus: false,
keyboardType: 'search', // number search next send done
fixedOn: api.frameName,
fixed: false
}, function(ret) {
console.log('open:' + JSON.stringify(ret));
id = ret.id;
});
}
function fnclose() {
var UIAdaptiveInput = api.require('UIAdaptiveInput');
UIAdaptiveInput.close({
id: id
});
}
function fnshow() {
var UIAdaptiveInput = api.require('UIAdaptiveInput');
UIAdaptiveInput.show({
id: id
});
}
function fnhide() {
var UIAdaptiveInput = api.require('UIAdaptiveInput');
UIAdaptiveInput.hide({
id: id
});
}
function fnbecomeFirstResponder() {
var UIAdaptiveInput = api.require('UIAdaptiveInput');
UIAdaptiveInput.becomeFirstResponder({
id: id
});
}
function fnresignFirstResponder() {
var UIAdaptiveInput = api.require('UIAdaptiveInput');
UIAdaptiveInput.resignFirstResponder({
id: id
});
}
function fnsetValue() {
var UIAdaptiveInput = api.require('UIAdaptiveInput');
UIAdaptiveInput.setValue({
value: '设置的文字',
id: id
});
}
function fngetValue() {
var UIAdaptiveInput = api.require('UIAdaptiveInput');
UIAdaptiveInput.getValue({
id: id
}, function(ret) {
if (ret) {
alert(JSON.stringify(ret));
}
});
}
function fninsertValue() {
var UIAdaptiveInput = api.require('UIAdaptiveInput');
UIAdaptiveInput.insertValue({
value: '这里是插入的字符串',
index: 2,
id: id
});
}
function fnsetPlaceholder() {
var UIAdaptiveInput = api.require('UIAdaptiveInput');
UIAdaptiveInput.setPlaceholder({
placeholder: '我是占位提示文字',
id: id
});
}
</script>
</html>

复制代码

lobtao · 回复于2020-12-28 18:16:11

UIAdaptiveInput maxLines参数无效

BIP652478 · 回复于2020-12-31 17:06:19

谢谢分享，学习一下