付宝容器 jsapi 档 册 PDF 版本 本版本为实验版本, 为线下独 查看使, 受制于 成 PDF 程序的限制, 样式问题还没有很好的解决, 例如分 切图 代码 亮 推荐使 在线版本, 便实时查看 jsapi 运 效果 如需搜索, 使 阅读 PDF 软件 带功能即可 更多细节样式调整和 录索引探索建设中 成时间 : 2017-07-20 12:13:21 Since 8.6 定义键盘 定义键盘使 :Android 和 ios 案不 样,Android 持直接通过原 的 input 输 框唤起,ios 通过 jsapi 唤起 0.1. ios 前端 DOM 结构 < input type="text" class="h5numinput" kb-type="0" data-paste="false" maxlength="8" data-placeholder=" 这 调 数字键盘 " - type: 持 type="password" - class="h5numinput" 标识 初始化加载就调 定义键盘 ; - kb-type:(9.9.1 之后开始 持别名 data-kb-type) 需要调 的键盘类型,`0` 为数字键盘,`1` 为身份证键盘,`2` 为不带 数点的键盘, 不写该属性默认为数字键盘 ; 键盘类型随时可扩展 ; - data-paste: 若为 false 则不能进 粘贴, 默认为 true; - data-placeholder: 需要显示的提示信息, 不能只写 placeholder; - maxlength: 最 度 - 居左 中 右对 : 添加 css 的 text-align, 持 left,center,right,justify, 默认为 left ios 数字键盘相关 API( 只有 ios 有,android 不 持 ) numinput: 于 动调 定义键盘 AlipayJSBridge.call('numInput'); inputfocus: 于当前端校验某 input 有问题, focus 到 input 输 框
AlipayJSBridge.call('inputFocus', { index: index // 于 focus 的某 input, 从 0 开始 ( 带有 class 含 h5numinput 的输 框 ) inputbackfill: 于当前端去除 值, 返回正确的值给 native(since 9.0) AlipayJSBridge.call('inputBackFill', { index: index, // 于回填的某 input, 从 0 开始 ( 带有 class 含 h5numinput 的输 框 ) value: 111 numinputreset: 于重新渲染某输 框的位置 (since 9.0) AlipayJSBridge.call('numInputReset', { index: index // 于重新渲染 input 位置, 从 0 开始 ( 带有 class 含 h5numinput 的输 框 ) inputblur: 动 blur(since 9.5) AlipayJSBridge.call('inputBlur', function() { // do something 0.1. 回调事件
document.addeventlistener('inputevent', function(event) { console.log("index:" + event.data.index); console.log("number:" + event.data.value); console.log("eventtype:" + event.data.eventtype); if(event.data.eventtype == "blur") { // do blur else if(event.data.eventtype == "focus") { // do focus else if(event.data.eventtype == "keyup") { // do keyup else if(event.data.eventtype == "keydown") { // do keydown else if(event.data.eventtype == "change") { // do change, false); 1. 使 法 2. 代码演示 2.1. 基本功能 <style> * { padding: 0; margin: 0; input { display: block; padding: 8px; box-sizing: border-box; -webkit-box-sizing: border-box; margin: 10px auto; #J_inputLog { line-height: 1.2; font-size: 12px; </style>
type="text" class="h5numinput" data-kb-type="0" kb-type="0" data-paste="false" maxlength="6" data-placeholder="ios kb-type=0" id="j_input1" type="text" class="h5numinput" data-kb-type="1" kb-type="1" data-paste="false" maxlength="6" data-placeholder="ios kb-type=1" id="j_input2" type="text" class="h5numinput" data-kb-type="2" kb-type="2" data-paste="false" maxlength="6" data-placeholder="ios kb-type=2" id="j_input3" type="number" placeholder="system/android" id="j_input4" <h5> 键盘事件 志 </h5> <div id="j_inputlog"></div> <script> function ready(callback) { // 如果 jsbridge 已经注 则直接调
if (window.alipayjsbridge) { callback && callback(); else { // 如果没有注 则监听注 的事件 document.addeventlistener('alipayjsbridgeready', callback, false); ready(function() { function dolog(logstr) { document.getelementbyid('j_inputlog').innerhtml += logstr + ''; document.addeventlistener('inputevent', function(event) { dolog("index:" + event.data.index); dolog("number:" + event.data.value); dolog("eventtype:" + event.data.eventtype); console.log(event); if(event.data.eventtype == "blur") { // do blur else if(event.data.eventtype == "focus") { // do focus else if(event.data.eventtype == "keyup") { // do keyup else if(event.data.eventtype == "keydown") { // do keydown else if(event.data.eventtype == "change") { // do change, false); </script> 2.2. Android 安卓 定义键盘直接识别 type= number, tel 或者其他以正则表达式约束的 input 输 框, tel 持 input 的其他扩展项, 如 maxlength 等 如果当前 存在其他输 框, 可在数字类型输 框的 onfocus 调 hidekeyboard 接, 以隐藏显示的系统键盘之后再唤起 定义键盘 < input type= number data-placeholder= 这 调 数字键盘 hideallkeyboard: 隐藏所有键盘 ( 包括 定义键盘 )(since 10.0.15)
AlipayJSBridge.call('hideAllKeyboard'); 2.3. Android 数字键盘 demo <h1>android 定义数字键盘 </h1> type= number data-placeholder= 这 调 数字键盘