0

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

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

我不知道如何继续这个实现，但我只是有几个想法，但不知道如何把它变成图片（更好的想法表示赞赏）

这是我的小提琴

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

  1. onLoad 我需要在我的文本框中显示数字12,3456,7890

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

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

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

我想是这样的：

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

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

3）相同订阅

4) 自定义验证分隔数字中的逗号并验证 ie 可能是正则表达式。

是否有可能在淘汰赛中，我有我的怀疑，但我希望一切都有办法。

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

任何想法都足以让我疯狂。

4

1 回答 1

1

您可以创建两个输入：

  • 默认情况下，输入 1 是只读且可见的，并且包含格式化的值。
  • 单击输入 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>

于 2014-11-21T17:05:00.780 回答