如何使用 mottie 键盘输入美分并将它们保留在那里?
How to input cents with mottie keyboard and keep them there?
我快要疯了...我已经投入了 16 多个小时试图让这个东西工作,如果有人知道这种邪恶行为的原因,请提供建议..
我在表单中有多个类型为数字的输入,我将键盘连接到每个输入,如下所示:
$('.amount').keyboard({
layout: 'custom',
customLayout : {
'normal' : ['1 2 3', '4 5 6', '7 8 9','{clear} 0 {bksp}','{accept}']
},
display : {
'accept' : 'Confirm:Confirm (Shift-Enter)',
'bksp' : 'Delete:Delete',
'clear': 'Clear:Clear'
},
beforeVisible: function(e, keyboard, el) {
$("#"+keyboard.$keyboard[0].id).addClass("hide-me");
},
restrictInput: true,
preventPaste: true,
autoAccept: true,
usePreview: false,
useWheel: false,
repeatRate: 0,
// this function is so I can display cents in the input
// there is no decimal in the keyboard as part of the requirements
change: function(e, keyboard, el) {
if (el.value === null || el.value === "") {
el.value = "0.00";
}
el.value = parseInt(el.value);
el.value = el.value * 0.01;
},
// this function is so I can display cents in the inputs
// there is no decimal in the keyboard as part of the requirements
accepted: function(e, keyboard, el) {
if (el.value === null || el.value === "") {
el.value = "0.00";
}
el.value = parseInt(el.value);
el.value = el.value * 0.01;
},
caretToEnd: 'true',
maxLength : '20',
css: {
container: 'center-block dropdown-menu custom-keypad',
buttonDefault: 'btn-kb',
buttonHover: 'btn-primary',
buttonAction: 'active',
buttonDisabled: 'disabled'
}
});
键盘会正常弹出,我可以在输入和确认输入时正确看到输入中的小数位。我的目标是汇总所有 input.val() 并在表单发生任何更改时立即验证它们。这样做的功能是这样的:
$('form').on('change', '.amount', function () {
var balance = NUMBER;
var sum = 0;
$(".amount").each(function (){
var valTotal = Number($(this).val());
if (!isNaN(valTotal)) {
sum += valTotal;
}
});
if (sum > balance) {
//stuff happens
}
});//.end of form
这就是问题所在,当我对输入求和时,我的小数点消失了!原来的 22.22 现在是 2222,所以我的总和是错误的,导致我的总和总是大于我的余额。我试图创建一个 fiddle 但它不会在结果框中弹出键盘,所以我无法向您展示一个实例..
这是我正在使用的 CDN:
https://cdnjs.cloudflare.com/ajax/libs/virtual-keyboard/1.26.17/js/jquery.keyboard.min.js
请指教!!
所以我联系了插件的创建者,他很友好地通过电子邮件回答了我的问题。他的解决方案非常有效!
你可以在这里看到 fiddle..
http://jsfiddle.net/Mottie/egb3a1sk/2506/
/* VIRTUAL KEYBOARD DEMO - https://github.com/Mottie/Keyboard */
$(function() {
// this function is so I can display cents in the input
// there is no decimal in the keyboard as part of the requirements
function convert(el) {
var value = el.value;
if (el.value === null || el.value === "") {
value = "0.00";
}
value = parseInt(value, 10);
value = value * 0.01;
el.value = value.toFixed(2);
}
NUMBER = 100;
function sum() {
var balance = NUMBER;
var sum = 0;
$(".amount:not(:disabled)").each(function() {
var valTotal = Number($(this).val());
if (!isNaN(valTotal)) {
sum += valTotal;
}
});
if (sum > balance) {
//stuff happens
}
$('.sum').text(sum);
}
$('.amount').keyboard({
layout: 'custom',
customLayout: {
'normal': ['1 2 3', '4 5 6', '7 8 9', '{clear} 0 {bksp}', '{accept}']
},
display: {
'accept': 'Confirm:Confirm (Shift-Enter)',
'bksp': 'Delete:Delete',
'clear': 'Clear:Clear'
},
beforeVisible: function(e, keyboard, el) {
$("#" + keyboard.$keyboard[0].id).addClass("hide-me");
},
restrictInput: true,
preventPaste: true,
autoAccept: true,
usePreview: false,
useWheel: false,
repeatRate: 0,
change: function(e, keyboard, el) {
convert(el);
},
accepted: function(e, keyboard, el) {
convert(el);
sum();
},
caretToEnd: 'true',
maxLength: '20',
css: {
container: 'center-block dropdown-menu custom-keypad',
buttonDefault: 'btn-kb',
buttonHover: 'btn-primary',
buttonAction: 'active',
buttonDisabled: 'disabled'
}
});
});
主要问题是 $('.amount') 选择器包含一个隐藏的重复输入,因此他将其更改为 $(".amount:not(:disabled)")
并且他还在 'accepted'
格式化后立即执行了 sum() 操作
工作完美 =)
我快要疯了...我已经投入了 16 多个小时试图让这个东西工作,如果有人知道这种邪恶行为的原因,请提供建议..
我在表单中有多个类型为数字的输入,我将键盘连接到每个输入,如下所示:
$('.amount').keyboard({
layout: 'custom',
customLayout : {
'normal' : ['1 2 3', '4 5 6', '7 8 9','{clear} 0 {bksp}','{accept}']
},
display : {
'accept' : 'Confirm:Confirm (Shift-Enter)',
'bksp' : 'Delete:Delete',
'clear': 'Clear:Clear'
},
beforeVisible: function(e, keyboard, el) {
$("#"+keyboard.$keyboard[0].id).addClass("hide-me");
},
restrictInput: true,
preventPaste: true,
autoAccept: true,
usePreview: false,
useWheel: false,
repeatRate: 0,
// this function is so I can display cents in the input
// there is no decimal in the keyboard as part of the requirements
change: function(e, keyboard, el) {
if (el.value === null || el.value === "") {
el.value = "0.00";
}
el.value = parseInt(el.value);
el.value = el.value * 0.01;
},
// this function is so I can display cents in the inputs
// there is no decimal in the keyboard as part of the requirements
accepted: function(e, keyboard, el) {
if (el.value === null || el.value === "") {
el.value = "0.00";
}
el.value = parseInt(el.value);
el.value = el.value * 0.01;
},
caretToEnd: 'true',
maxLength : '20',
css: {
container: 'center-block dropdown-menu custom-keypad',
buttonDefault: 'btn-kb',
buttonHover: 'btn-primary',
buttonAction: 'active',
buttonDisabled: 'disabled'
}
});
键盘会正常弹出,我可以在输入和确认输入时正确看到输入中的小数位。我的目标是汇总所有 input.val() 并在表单发生任何更改时立即验证它们。这样做的功能是这样的:
$('form').on('change', '.amount', function () {
var balance = NUMBER;
var sum = 0;
$(".amount").each(function (){
var valTotal = Number($(this).val());
if (!isNaN(valTotal)) {
sum += valTotal;
}
});
if (sum > balance) {
//stuff happens
}
});//.end of form
这就是问题所在,当我对输入求和时,我的小数点消失了!原来的 22.22 现在是 2222,所以我的总和是错误的,导致我的总和总是大于我的余额。我试图创建一个 fiddle 但它不会在结果框中弹出键盘,所以我无法向您展示一个实例..
这是我正在使用的 CDN:
https://cdnjs.cloudflare.com/ajax/libs/virtual-keyboard/1.26.17/js/jquery.keyboard.min.js
请指教!!
所以我联系了插件的创建者,他很友好地通过电子邮件回答了我的问题。他的解决方案非常有效!
你可以在这里看到 fiddle.. http://jsfiddle.net/Mottie/egb3a1sk/2506/
/* VIRTUAL KEYBOARD DEMO - https://github.com/Mottie/Keyboard */
$(function() {
// this function is so I can display cents in the input
// there is no decimal in the keyboard as part of the requirements
function convert(el) {
var value = el.value;
if (el.value === null || el.value === "") {
value = "0.00";
}
value = parseInt(value, 10);
value = value * 0.01;
el.value = value.toFixed(2);
}
NUMBER = 100;
function sum() {
var balance = NUMBER;
var sum = 0;
$(".amount:not(:disabled)").each(function() {
var valTotal = Number($(this).val());
if (!isNaN(valTotal)) {
sum += valTotal;
}
});
if (sum > balance) {
//stuff happens
}
$('.sum').text(sum);
}
$('.amount').keyboard({
layout: 'custom',
customLayout: {
'normal': ['1 2 3', '4 5 6', '7 8 9', '{clear} 0 {bksp}', '{accept}']
},
display: {
'accept': 'Confirm:Confirm (Shift-Enter)',
'bksp': 'Delete:Delete',
'clear': 'Clear:Clear'
},
beforeVisible: function(e, keyboard, el) {
$("#" + keyboard.$keyboard[0].id).addClass("hide-me");
},
restrictInput: true,
preventPaste: true,
autoAccept: true,
usePreview: false,
useWheel: false,
repeatRate: 0,
change: function(e, keyboard, el) {
convert(el);
},
accepted: function(e, keyboard, el) {
convert(el);
sum();
},
caretToEnd: 'true',
maxLength: '20',
css: {
container: 'center-block dropdown-menu custom-keypad',
buttonDefault: 'btn-kb',
buttonHover: 'btn-primary',
buttonAction: 'active',
buttonDisabled: 'disabled'
}
});
});
主要问题是 $('.amount') 选择器包含一个隐藏的重复输入,因此他将其更改为 $(".amount:not(:disabled)") 并且他还在 'accepted'
格式化后立即执行了 sum() 操作工作完美 =)