在文本框中格式化数字模糊和加载?使用挖空

Question

我有一个带有数字类型的文本框的视图，我正在使用挖空验证插件成功验证我是否输入数字

但是这种情况是，我需要用每四位数字onBlur的comma格式化我输入的数字（百万格式）。

我不知道如何进行此实现，但我只是有几个想法，但不知道如何将其制作成图片（赞赏更好的想法）

这是我的小提琴

要求：我将根据这个数字解释我的场景1234567890

1. 加载我需要将文本框中的数字显示为12,3456,7890

2. 如果用户想要修改数字意味着当他在文本框内单击时，数字应该变得1234567890，以便他可以修改它（onblur 有点）。

3. 修改后，如果用户在文本框外单击，则意味着该数字应变为逗号分隔以查看。

4. 最后，我有验证来检查它是否是数字. #so 它应该接受带逗号的数字。

我是这样想的：

1）我使用计算格式化并返回它

2）对此没有线索，但考虑订阅

3）相同的订阅

4）自定义验证分隔数字中的逗号并进行验证，即可能是正则表达式。

甚至有可能在淘汰赛中是否有可能，我有我的怀疑，但手指交叉我希望一切都有办法.

有趣的是，我发现了 knockout-kendo 它可以完成我正在寻找的工作，但我更喜欢在 knockout 中实现相同的功能，而不是使用其他一些在某些时间点导致问题的插件。

任何想法都足够疯狂，让我跑.

Answer 1

您可以创建两个输入：

• 默认情况下，输入 1 是只读和可见的，并包含格式化的值。
• 单击输入 1 时，将其隐藏，显示输入 2 并将其与可编辑的实际值聚焦。
• 当输入 2 "模糊"时，将其隐藏并显示带有格式化值的输入 1。

目录：

<div>
    <input type="text" readonly data-bind="value: valFormatted, 
                                           visible: !editMode(),
                                           click: toggleEdit" />
    <input type="text" data-bind="value: val, 
                                  visible: editMode, 
                                  hasFocus: editMode,
                                  event: { blur: toggleEdit}" />
</div>

.JS：

window.onload = function() {
    var vm = {
        val: ko.observable(),
        valFormatted: ko.computed({
            read: function() {
                // number format
                return (vm.val() || '') + '[formatted]';
            },
            deferEvaluation: true
        }),
        editMode: ko.observable(false),
        toggleEdit: function() {
            vm.editMode(!vm.editMode());
        }
    };
    ko.applyBindings(vm);
};

window.onload = function() {
	var vm = {
		val: ko.observable(),
		valFormatted: ko.computed({
			read: function() {
				// number format
				return (vm.val() || '') + '[formatted]';
			},
			deferEvaluation: true
		}),
		editMode: ko.observable(false),
		toggleEdit: function() {
			vm.editMode(!vm.editMode());
		}
	};
	ko.applyBindings(vm);
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div>
<input type="text" data-bind="value: valFormatted, visible: !editMode(), click: toggleEdit" readonly />
<input type="text" data-bind="value: val, visible: editMode, hasFocus: editMode, event: { blur: toggleEdit}" />
</div>