Question

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

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

我不知道如何继续这个实现，但我只是有几个想法，但不知道如何使它成为图片（更好的想法得到赞赏）

这是我的FIDDLE

要求：我将根据此号码1234567890

解释我的方案

onLoad我需要在文本框中显示12,3456,7890
如果用户想要修改数字，则意味着当他在文本框内点击时，该数字应该变为1234567890，以便他可以修改它（在某种程度上）。
修改后，如果用户在文本框外单击，则表示该数字应以逗号分隔以查看。
最后我有验证是否是号码。 #so它应该用逗号接受数字。

我认为是这样的：

1）我用compute来格式化并返回它

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

3）同样订阅

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

甚至在淘汰赛中是否有可能我怀疑但手指交叉我希望一切都有一些方法。

有趣的是，我发现knockout-kendo能够完成我正在寻找的工作，但我更喜欢在淘汰赛中实现相同的功能，而不是使用其他一些在某些时间点引起问题的插件。

任何想法都让我疯狂。

Answer 1

您可以创建两个输入：

输入1是只读＆amp;默认情况下可见并包含格式化的值。
单击输入1时，隐藏它，显示并使用可编辑的实际值对输入2进行聚焦。
当输入2为“模糊”时，将其隐藏并显示带有格式化值的输入1.

HTML：

<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>

格式化TextBox onBlur和onLoad中的数字？使用Knockout

1 个答案:

HTML：

JS：