微信小程序自定义键盘|仿支付宝、微信支付数字键盘

45次阅读

共计 2383 个字符,预计需要花费 6 分钟才能阅读完成。

小程序自定义数字键盘插件 wckeyboard| 仿微信支付密码键盘 | 仿支付宝数字键盘小程序由于没有键盘组件,只能是使用 <input type=”number”> 来唤起系统键盘了,在某些场景下,自定义数字键盘还是有需要的,如:商城系统零钱支付、会员卡支付等,需要输入密码的时候,如果能使用自定义数字键盘的话,会有比较好的用户体验。

callback: function () {
console.log(‘ 事件处理 ’);

var that = this, opt = that.opts;
// 清除上一个 timer
clearTimeout(util.timer[that.__idx – 1]);
delete util.timer[that.__idx – 1];

/*
* 键盘处理函数事件 —————————————
*/
// 错误提示
function chkErr(cls, str){
__this.setData({‘__options.err’: [cls, str] });
setTimeout(function(){
__this.setData({‘__options.err’: false});
}, 2500);
}
// 键盘值检测
function chkVal(text){
if (text.indexOf(‘.’) != -1 && text.substring(text.indexOf(‘.’) + 1, text.length).length == 3) {
return;
}
if (text == ‘0’) {
return;
}
// 输入最大值限制
if (opt.max) {
if (parseInt(text) >= opt.max && text.indexOf(‘.’) == -1) {
chkErr(“error”, “ 最大限制值:” + opt.max.toFixed(2));
return;
}
}
// 输入手机号码判断
if (opt.type && opt.type == ‘tel’) {
var tel = text, _len = parseInt(tel.length), reg = /^0?1[3|4|5|8|7][0-9]\d{8}$/;
if (_len > 11) return;

if (_len == 11) {
if (!reg.test(tel)) {
chkErr(“error”, “ 手机号码格式有误!”);
} else {
chkErr(“success”, “ 验证通过!”);
}
typeof opt.complete == “function” && opt.complete.call(this, text);
}
}
// 输入密码长度判断
if (opt.type && opt.type == ‘pwd’) {
var _len = parseInt(text.length);
if (_len > opt.len) return;
if (_len == opt.len) {
typeof opt.complete == “function” && opt.complete.call(this, text);
}
}
return true;
}
// 键盘值输出
function setVal(text){
__this.setData({‘__options.kbVal’: text});

typeof opt.oninput == “function” && opt.oninput.call(this, text);
}
// 处理数字 1 -9
__this.tapNum = function(e){
var kbval = this.data.__options.kbVal, text = e.currentTarget.dataset.text;
var val = kbval + text;
if (!chkVal(val)) return;

setVal(val);
}

// 处理小数点
__this.tapFloat = function(e){
var kbval = this.data.__options.kbVal, text = e.currentTarget.dataset.text;
if(kbval == ” || kbval.indexOf(‘.’) != -1){
return;
}
var val = kbval + text;
setVal(val);
}

// 处理数字 0
__this.tapZero = function(e){
var kbval = this.data.__options.kbVal, text = e.currentTarget.dataset.text;
var val = kbval + text;
if (!chkVal(val)) return;

setVal(val);
}

// 处理删除
__this.tapDel = function(e){
var val = this.data.__options.kbVal.substring(0, this.data.__options.kbVal.length – 1);
setVal(val);
}

// 处理确定按钮事件
__this.tapSure = function(e){
var kbval = this.data.__options.kbVal;
typeof opt.ok == “function” && opt.ok.call(this, kbval);
}

/*
—————————————
*/
// 点击遮罩层关闭
__this.shadeTaped = function (e) {
if (!opt.shadeClose) return;
exportAPI.close(that.__idx);
}
// 点击键盘 xclose 按钮关闭
__this.xcloseTaped = function(e){
exportAPI.close(that.__idx);
}
// 处理销毁函数
opt.end && (util.end[that.__idx] = opt.end);

}

正文完
 0