superKeyboard

概述

superKeyboard 插件提供了键盘类似布局,所有按钮都可以自己定义内容,颜色,无论是需要车牌输入法,数字输入法(数字键盘),字 母输入法,计算器等都是可以实现的,键盘里面按键内容任意自定义,superKeyBoard更加自由,更加灵活,并且由于安全需要,插件还 增加了顺序打乱的功能。

场景示例:当前需要一款车牌键盘,那么我们需要的有,26个字母键盘+省市简称键盘+数字键盘,很明显如果使用自带的原生键盘在用户 体验方面是很不友好的,如果想提升用户体验,那么就可以使用superKeyBoard,只需要定义3个函数,分别定义自己的需要的参数,在回 调函数里面判断text的值分别调用不同的函数进行键盘切换即可。

open

打开插件。

open({params} , callback(ret, err))

params

rect:

  • 类型: JSON 对象
  • 默认值:见内部字段
  • 描述:插件的位置及尺寸
  • 内部字段:

        {
            x: 0,   //(必须)数字类型;插件左上角的 x 坐标,如果 x + 面板最终的宽度 > 屏幕宽度,那么 x 会被自动更改为:屏幕宽度 - 面板最终的宽度
               y: 0,   //(必须)数字类型;插件左上角的 y 坐标,/如果 y + 面板最终的高度 > 屏幕高度,那么 y 会被自动更改为:屏幕高度 - 面板最终的高度
            w: 300, //(必须)数字类型;插件的宽度
        }

keys:

  • 类型: JSON数组
  • 默认值:无
  • 描述: (必须项)数组形式,根据传入的数组长度进行行和列的排列,具体使用见示例代码

disorder:

  • 类型: 布尔
  • 默认值:false
  • 描述: 排列顺序是否打乱,如打乱可以增加安全性

padding:

  • 类型: 数字
  • 默认值:10
  • 描述: 插件的边距,上下左右边距都是一样的

bgColor:

  • 类型: 字符串
  • 默认值:#EBEBEB
  • 描述: 插件背景颜色,支持 rgb,#,如rgb(255,240,245)或者#FFF0F5

btnBg:

  • 类型: 字符串
  • 默认值:#FFFFFF
  • 描述: 按钮背景颜色,支持 rgb,#,如rgb(255,240,245)或者#FFF0F5

btnRadius:

  • 类型: 数字
  • 默认值:5
  • 描述: 按钮圆角值

btnTextColor:

  • 类型: 字符串
  • 默认值:#000000
  • 描述: 按钮字体颜色,支持 rgb,#,如rgb(255,240,245)或者#FFF0F5

btnTextSize:

  • 类型: 数字
  • 默认值:16
  • 描述: 按钮字体大小

btnBorderColor:

  • 类型: 字符串
  • 默认值:#CCCCCC
  • 描述: 按钮边框颜色,支持 rgb,#,如rgb(255,240,245)或者#FFF0F5

btnBorderWeight:

  • 类型: 数字
  • 默认值:2
  • 描述: 按钮边框宽度

btnBgPressed:

  • 类型: 字符串
  • 默认值:#4F94CD
  • 描述: 按钮点击状态时颜色,支持 rgb,#,如rgb(255,240,245)或者#FFF0F5

btnTextColorPressed:

  • 类型: 字符串
  • 默认值:#FFFFFF
  • 描述: 按钮点击状态时字体颜色,支持 rgb,#,如rgb(255,240,245)或者#FFF0F5

buttonSpace:

  • 类型: 数字
  • 默认值:5
  • 描述: 按钮之间左右间隔

rowSpace:

  • 类型: 数字
  • 默认值:5
  • 描述: 每行上之间上下间隔

heightRatio:

  • 类型: 双精度浮点型
  • 默认值:1.0
  • 描述: 按钮高与宽的比例,如宽为20,那么高是宽的0.8,则高为16,使用中请按照当时情况进行比例调整

fixedOn:

  • 类型: 字符串类型
  • 默认值:(可选项)插件视图添加到指定 frame 的名字(只指 frame,传 window 无效)
  • 描述: 插件依附于当前 window

fixed:

  • 类型: 布尔
  • 默认值:true
  • 描述: 是否将插件视图固定到窗口上,不跟随窗口上下滚动,可为空

callback(ret, err)

ret:

  • 类型:JSON对象
  • 内部字段:

        {
            result:'ok'   //描述执行结果,ok表示执行成功
            text:'w'      //表示点击按钮的值
        }

err:

  • 类型:JSON对象
  • 内部字段:

        {
            msg:''	   //错误信息描述
        }

示例代码

     var toNumText="";//声明全局变量,控制返回按钮开启什么键盘
    //小写键盘
    function fnLowerKeyBoard() {
        var demo = api.require('superKeyboard');
        demo.open({
            rect: {
                x: 2000,
                y:2000,
                w: api.winWidth
            },
            keys: [      
            ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"],
            ["a","s", "d", "f", "g", "h", "j", "k", "l"],
            ["数字","大写","z","x", "c", "v", "b", "n", "m", "←","清空"]
            ],
            disorder:false,
            padding:15,
            bgColor:"#EBEBEB",
            btnBg:"#FFFFFF",
            btnRadius:10,
            btnTextColor:"#000000",
            btnTextSize:11,
            btnBorderColor:"#CCCCCC",
            btnBorderWeight:2,
            btnBgPressed:"#4F94CD",
            btnTextColorPressed:"#FFFFFF",
            buttonSpace:10,
            rowSpace:20,
            heightRatio:1.3,
            fixedOn: api.frameName,
            fixed: true
        }, function (ret, err) {
            if (err){
                alert(JSON.stringify(err));
            }
            else {
                if(ret.text){
                    if(ret.text=="大写"){
                      fnUpperKeyBoard();
                    }
                    else if(ret.text=="数字"){
                    	toNumText="小写";
                   		fnNumberKeyboard();
                    }
                    else{
                    	alert(JSON.stringify(ret));
                    }
                }
            }
        });
    }
    //大写键盘
    function fnUpperKeyBoard(){
        var demo = api.require('superKeyboard');
        demo.open({
            rect: {
                x: 2000,
                y:2000,
                w: api.winWidth
            },
            keys: [      
            ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"],
            ["A","S", "D", "F", "G", "H", "J", "K", "L"],
            ["数字","小写","Z","X", "C", "V", "B", "N", "M", "←","清空"]
            ],
            disorder:false,
            padding:15,
            bgColor:"#EBEBEB",
            btnBg:"#FFFFFF",
            btnRadius:10,
            btnTextColor:"#000000",
            btnTextSize:11,
            btnBorderColor:"#CCCCCC",
            btnBorderWeight:2,
            btnBgPressed:"#4F94CD",
            btnTextColorPressed:"#FFFFFF",
            buttonSpace:10,
            rowSpace:20,
            heightRatio:1.3,
            fixedOn: api.frameName,
            fixed: true
        }, function (ret, err) {
            if (err){
                alert(JSON.stringify(err));
            }
            else {
                if(ret.text){
                    if(ret.text=="小写"){
                   		fnLowerKeyBoard();
                    }
                    else if(ret.text=="数字"){
                    	toNumText="大写";
                   		fnNumberKeyboard();
                    }
                    else
                    {
                        alert(JSON.stringify(ret));
                    }
                }
            }
        });
    }
    //数字键盘
    function fnNumberKeyboard(){
    var demo = api.require('superKeyboard');
        demo.open({
            rect: {
                x: 2000,
                y:2000,
                w: api.winWidth
            },
            keys: [      
            ["1","2","3","←"],
            ["4","5","6","空格"],
            ["7","8","9","清空"],
            ["返回","0",".","+"]
            ],
            disorder:false,
            padding:15,
            bgColor:"#EBEBEB",
            btnBg:"#FFFFFF",
            btnRadius:10,
            btnTextColor:"#000000",
            btnTextSize:14,
            btnBorderColor:"#CCCCCC",
            btnBorderWeight:2,
            btnBgPressed:"#4F94CD",
            btnTextColorPressed:"#FFFFFF",
            buttonSpace:10,
            rowSpace:20,
            heightRatio:0.5,
            fixedOn: api.frameName,
            fixed: true
        }, function (ret, err) {
            if (err){
                alert(JSON.stringify(err));
            }
            else {
                if(ret.text){
                    if(ret.text=="返回"){
                    	if(toNumText=="小写"){
                          fnLowerKeyBoard();
                        }
                        else if(toNumText=="大写"){
                          fnUpperKeyBoard();
                        }
                        else{
                    	  alert(JSON.stringify(ret));
                    	}
                    }
                }
            }
        });
    }

可用性

Android系统

可提供的1.0.0及更高版本

close

close(callback(ret, err))

关闭键盘。

callback(ret, err)

ret:

  • 类型:JSON对象数组
  • 内部字段:

        {
            result:'ok'   //描述执行结果,ok表示执行成功
        }

err:

  • 类型:JSON对象
  • 内部字段:

        {
            msg:''	   //错误信息描述
        }

示例代码

          var module = api.require('superKeyboard');
        module.close(function(ret,err){
          if (err){
                alert(JSON.stringify(err));
            }
            else {
                  alert(JSON.stringify(ret));
            }
        });

可用性

Android系统

可提供的1.0.0及更高版本

getHeight

getHeight(callback(ret, err))

获取插件高度。

callback(ret, err)

ret:

  • 类型:JSON对象
  • 内部字段:

        {
            result:'ok'   //描述执行结果,ok表示执行成功
            height:100     //插件实际高度
        }

err:

  • 类型:JSON对象
  • 内部字段:

        {
            msg:''	   //错误信息描述
        }

示例代码

          var module = api.require('superKeyboard');
        module.getHeight(function(ret,err){
            if (err){
                alert(JSON.stringify(err));
            }
            else {
                alert(JSON.stringify(ret));
            }
        });

可用性

Android系统

可提供的1.0.0及更高版本

getWidth

getWidth(callback(ret, err))

获取插件宽度。

callback(ret, err)

ret:

  • 类型:JSON对象
  • 内部字段:

        {
            result:'ok'   //描述执行结果,ok表示执行成功
            width:100     //插件实际宽度
        }

err:

  • 类型:JSON对象
  • 内部字段:

        {
            msg:''	   //错误信息描述
        }

示例代码

          var module = api.require('superKeyboard');
          module.getWidth(function(ret,err)
          {
            if (err){
                alert(JSON.stringify(err));
            }
            else{
                alert(JSON.stringify(ret));
            }
          });

可用性

Android系统

可提供的1.0.0及更高版本

是否仍需要帮助? 请保持联络!
最后更新于 2024/02/22