Question

在使用C＃的asp.net-mvc项目中。

由于this post，我使用函数用逗号（例如1,000,000来格式化更大的数字：

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

问题是，我将输入锁定为仅接受最小值为零的数字。

<input type="number" min="0" class="myclass" value="@somevalue" />

这会引起使用JS的问题，因为它只需要数字输入。这让我想到了一个像How to make HTML input tag only accept numerical values?这样的问题，它也提供了一个JS解决方案。

我想知道是否有人开发了一种优雅的数字输入显示格式，同时验证数字输入，这里还有其他选项吗？它不一定纯粹是一个JS解决方案。

Answer 1

您无法使用数字输入，因为，JavaScript并不认为格式化的数字是数字。

该选项是使用非数字输入，但过滤掉任何有问题的＆＃34;字符。

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

正在编辑文本框时，还必须保留光标位置。我在Updating an input's value without losing cursor position的帮助下实现了它。

＆＃13;

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, ",");
}

＆＃13;

<input onkeyup="format(this)">

＆＃13;

Answer 2

我有第一个问题的答案。

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

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

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

}

我还创建了working demo on jsfiddle

Answer 3

程序流程：
通过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
    });
});

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

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

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

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

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

见工作fiddle。

我在尝试满足项目截止日期时实际上找到了一个很好的解决方案，部分由this answer nicael解决了。

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

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

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

3 个答案: