prompt输入框弹窗的native实现
AlipayJSBridge.call('prompt', {
title: '亲',
message: '确定要这么干吗?',
placeholder:'提示文案',
okButton: '是',
cancelButton: '否'
}, function(result) {
alert(JSON.stringify(result));
});
<h1>点击以下按钮看效果</h1>
<a href="javascript:void(0)" class="btn prompt">点击prompt</a>
<p class="result"></p>
<script>
function ready(callback) {
// 如果jsbridge已经注入则直接调用
if (window.AlipayJSBridge) {
callback && callback();
} else {
// 如果没有注入则监听注入的事件
document.addEventListener('AlipayJSBridgeReady', callback, false);
}
}
ready(function() {
document.querySelector('.prompt').addEventListener('click', function() {
AlipayJSBridge.call('prompt', {
title: '亲',
message: '确定要这么干吧',
okButton: '确定',
cancelButton: '算了',
placeholder:'placeholder'
}, function(result) {
alert(JSON.stringify(result));
if (result.ok) {
document.querySelector('.result').textContent = result.inputValue;
}
});
});
});
</script>
AlipayJSBridge.call('prompt',{
title, message, okButton, cancelButton,placeholder
}, fn)
名称 | 类型 | 描述 | 必选 | 默认值 | 版本 |
---|---|---|---|---|---|
title | string | prompt框标题 | N | ‘’ | |
message | string | prompt框文本 | N | ||
align | string | message对齐方式,可用枚举left/center/right | N | iOS ‘center’, android ‘left’ | 10.0.5 |
okButton | string | 确定按钮文字 | N | ‘确定’ | |
cancelButton | string | 取消按钮文字 | N | ‘取消’ | |
placeholder | string | 输入框内的提示文案 | N | ‘’ | |
fn | function | 回调函数,当点击button后被调用 | N |
prompt
这个api和alert
一样,它也不是阻塞式的,也就是说先后弹2个的话,最后看到的是后弹的那个。