格式化数字输入时验证数字输入-Validatingnumericinputwhileformattingnumericinput

6  

You can't use the numeric input, because, well, Javascript doesn't consider formatted number to be a number.

您不能使用数字输入，因为，Javascript不会将格式化数字视为数字。

The option is to use the non-numeric input but filter out any "problematic" chars.

选项是使用非数字输入，但过滤掉任何“有问题”的字符。

In the following example, I'm also handling the dot separator in case you need to accept fractions.

在下面的示例中，我还处理点分隔符，以防您需要接受分数。

As the text box is being edited, it also has to preserve the cursor position. I've achieved it there with the help of Updating an input's value without losing cursor position.

在编辑文本框时，还必须保留光标位置。我已经在更新输入值而不会丢失光标位置的帮助下实现了它。

function format(inp){
  var start = inp.selectionStart,  // get the selection start
      end   = inp.selectionEnd;    // and end, as per the linked post
  var s1=inp.value.split(",").length-1; //count the commas before edit
  inp.value=numberWithCommas(inp.value.replace(/,|[^\d.]/g,''));
  var s2=inp.value.split(",").length-s1-1; //count the commas after edit so as to know where to place the cursor, as the position changes, if there are new commas or some commas have been removed
  inp.setSelectionRange(start+s2, end+s2); // set the selection start and end, as per the linked post
}
function numberWithCommas(str) {
  var a=str.split('.');
  var p=/\B(?=(\d{3})+(?!\d))/g;
  if(a.length>1)
    return a[0].toString().replace(p, ",")+"."+a[1];
  else 
    return str.toString().replace(p, ",");
}

5  

I have the answer of your first question.

我有你的第一个问题的答案。

You can disable all keys rather than only numbers keys.

您可以禁用所有键，而不是仅禁用数字键。

function isNumberKey(evt)  {
    var charCode = (evt.which) ? evt.which : event.keyCode;

    if (charCode != 43 && charCode > 31
      && (charCode <48 || charCode > 57))
        return false;
    return true;

}

I also created working demo on jsfiddle

我还在jsfiddle上创建了工作演示

2  

The program flow:
Getting the input via an on change event and calling the other functions, showing passing the data through a Ajax POST.

程序流程：通过on change事件获取输入并调用其他函数，显示通过Ajax POST传递数据。

$('.Amount').on("change", function (e) {
    var myInput = $(e.target);
    var input = this.value;
    // Remove any non digits (including commas) to pass value to controller.
    var Amount = validateInput(input);
    // Format the string to have commas every three digits 1,000,000 for display.
    var val = numberWithCommas(Amount);
    $(myInput).val(val);

    $.ajax({
        type: 'POST',
        dataType: "json",
        url: somesUrl + '/' + somethingelse,
        data: JSON.parse('{"Amount": "' + Amount + '"}'), // Amount is a nice format here and will not throw an error.
        // TODO etc
    });
});

Remove any non numbers and give a value of zero if no numbers are inputted.

删除所有非数字，如果没有输入数字，则给出零值。

var validateInput = function (input) {
    input = input.toString().replace(/[^0-9]/g, "");
    /* Remove leading zeros. */
    input = input.replace(/^0+/, '');
    if (input == "")
        input = 0;
    return input;
}

Format the input with commas 1,000,000,000.

使用逗号1,000,000,000格式化输入。

function numberWithCommas(str) {
    return str.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

So even if the user types input with commas e.g. 1,734,567 it will work and if they misplace where they put a commas e.g. 17,35,555 it will still validate.

即使用户使用逗号键入输入，例如1,734,567它会起作用，如果它们错放在他们放逗号的地方，例如它将仍然有效。

See working fiddle.

看工作小提琴。

I actually worked out a nice solution while trying to meet project deadlines and in part this was solved by this answer by nicael.

实际上，我在尝试满足项目期限的过程中找到了一个很好的解决方案，部分原因是nicael通过这个答案解决了这个问题。

This solution does not check the input as it is being typed, but after it is finished, I chose the change event, as opposed to the input event, as it calls the function once and (similar to a submit event) than validates the input in one call. Removing any commas and non digits; solving the issue of formatting with commas, by removing them for the ajax call, then reformatting it with commas for the display. There is a check to remove leading zeros.

此解决方案不会在输入时检查输入，但在完成后，我选择了更改事件，而不是输入事件，因为它调用函数一次（类似于提交事件）而不是验证输入在一个电话中。删除任何逗号和非数字;解决使用逗号格式化的问题，通过删除它们进行ajax调用，然后用逗号重新格式化以显示。有一个检查删除前导零。

If all the input is garbage I replace this value with zero to prevent an error passing to the controller with null data (just a design choice, could display a toast message instead).

如果所有输入都是垃圾，我将此值替换为零以防止错误传递给具有空数据的控制器（只是一个设计选择，可以显示一个Toast消息）。