嗞嗞嗞~ 你的浏览器仿佛在对我微笑!

YDUI Touch Docs 返回首页

KeyBoard

1、说明

1.1、示例:http://m.ydui.org/html/keyboard.html

1.2、六位密码安全键盘插件;KeyBoard 仅支持Javascript API方式调用;

2、调用

Javascript API 调用

可在 .m-keyboard 容器内自定义显示内容;

通过 [open][close] 方法打开或关闭键盘;

[done.ydui.keyboard] 事件执行后返回当前输入的密码(password)。

<div class="m-button">
<a href="javascript:;" class="btn-block btn-primary" id="J_OpenKeyBoard">打开</a>
</div>

<div class="m-keyboard" id="J_KeyBoard">
<!-- 自定义内容区域 -->
<div style="text-align: right;padding: .15rem .8rem 0;"><a href="http://www.ydui.org" style="color: #666;font-size: .24rem;">忘记密码</a></div>
<!-- 自定义内容区域 -->
</div>

<script>
var $keyboard = $('#J_KeyBoard');

/* 初始化参数 */
$keyboard.keyBoard({
disorder: false, /* 是否打乱数字顺序 */
title: 'YDUI安全键盘' /* 显示标题 */
});

/* 打开键盘 */
$('#J_OpenKeyBoard').on('click', function () {
$keyboard.keyBoard('open');
});

/* 六位密码输入完毕后执行 */
$keyboard.on('done.ydui.keyboard', function (ret) {

console.log('输入的密码是:' + ret.password);

YDUI.dialog.loading.open('验证支付密码');
setTimeout(function(){
/* 显示错误信息 */
YDUI.dialog.loading.close();
$keyboard.keyBoard('error', '对不起,您的支付密码不正确,请重新输入。');
}, 1500);

/* 关闭键盘 */
/* $keyboard.keyBoard('close'); */
});
</script>

3、包含3个方法可用

3.1、open:打开键盘

3.2、close:关闭键盘

3.3、error:提示错误信息

4、自定义事件

4.1、[done.ydui.keyboard]:密码输入完毕后执行;

5、参数

参数说明类型可选值默认值
disorder 是否打乱数字键盘顺序 Boolean - false
title 显示标题 String - 安全键盘

6、参与讨论

6.1、有任何使用问题,请在评论中留言,也欢迎大家发表意见、建议。感谢您对YDUI的支持。