javascript - 如何使用 mottie 键盘输入美分并将它们保留在那里？

Question

我快要疯了...我已经投入了超过 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.extension-all.min.js

https://cdnjs.cloudflare.com/ajax/libs/virtual-keyboard/1.26.17/js/jquery.keyboard.min.js

请指教!!

Answer 1

所以我联系了插件的创建者，他很友好地通过电子邮件回答了我的问题。他的解决方案非常有效!

你可以在这里看到 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() 操作

完美地工作 =)