付宝容器 jsapi 档册 PDF 版本本版本为实验版本, 为线下独查看使, 受制于成 PDF 程序的限制, 样式问题还没有很好的解决, 例如分切图代码亮推荐使在线版本, 便实时查看 jsapi 运效果如需搜索, 使阅读 PDF 软件带功能即可更多细节样式调整和录索引探

Size: px

Start display at page:

Download "付宝容器 jsapi 档册 PDF 版本本版本为实验版本, 为线下独查看使, 受制于成 PDF 程序的限制, 样式问题还没有很好的解决, 例如分切图代码亮推荐使在线版本, 便实时查看 jsapi 运效果如需搜索, 使阅读 PDF 软件带功能即可更多细节样式调整和录索引探"

岚祖
6 years ago
Views:

1 付宝容器 jsapi 档册 PDF 版本本版本为实验版本, 为线下独查看使, 受制于成 PDF 程序的限制, 样式问题还没有很好的解决, 例如分切图代码亮推荐使在线版本, 便实时查看 jsapi 运效果如需搜索, 使阅读 PDF 软件带功能即可更多细节样式调整和录索引探索建设中成时间 : :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 输框

2 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. 回调事件

3 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>

4 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 已经注则直接调

5 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 )

6 AlipayJSBridge.call('hideAllKeyboard'); 2.3. Android 数字键盘 demo <h1>android 定义数字键盘 </h1> type= number data-placeholder= 这调数字键盘

5-1 nav css 5-2

5 HTML CSS HTML CSS Ê Ê Ê Ê 5-1 nav css 5-2 5-1 5 5-1-1 5-01 css images 01 index.html 02 5-3 style.css css 03 CH5/5-01/images 04 images index.html style.css 05