Форматирование числа в TextBox onBlur и onLoad? используя нокаут

У меня есть представление с текстовым полем типа «Число», и я успешно проверяю, ввожу ли я числовые значения или нет, используя плагин проверки нокаута.

Но вот возникает ситуация, когда мне нужно отформатировать введенные числа с помощью comma для каждых четырех цифр onBlur (миллионы форматов).

Я понятия не имею, как продолжить эту реализацию, но у меня просто было несколько мыслей, но я не знаю, как воплотить их в картину (лучше идеи приветствуются)

Вот мой FIDDLE

Требование: я объясню свой сценарий на основе этого числа 1234567890

  1. onLoad мне нужно показать число в моем текстовом поле как 12,3456,7890

  2. Если пользователь хочет изменить число, это означает, что когда он щелкает внутри текстового поля, число должно стать 1234567890, чтобы он мог его изменить (что-то вроде размытия).

  3. После изменения, если пользователь щелкает за пределами текстового поля, это означает, что число должно быть разделено запятой для просмотра.

  4. Наконец, у меня есть проверка, чтобы проверить, является ли это числом или нет. #поэтому он должен принимать числа с запятой.

Я подумал примерно так:

1) я использую вычисление для форматирования и возврата

2) понятия не имею об этом, но подумал подписаться

3)та же подписка

4) пользовательская проверка, разделяющая запятые в числе и проверяющая, т.е. может быть выражением регулярного выражения.

Возможно ли это в нокауте или нет, у меня есть сомнения, но скрестив пальцы, я надеюсь, что все как-то сложится.

Интересно, что я нашел knockout-kendo, который делает работа, которую я ищу, но я предпочитаю реализовать ту же функциональность в нокауте, а не использовать какой-то другой плагин, который вызывает проблемы в какой-то момент времени.

Любые идеи достаточно безумны для меня, чтобы бежать.


knockout.js knockout-validation knockout-kendo
person super cool    schedule 21.11.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете создать два входа:

  • Вход 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>

person manji    schedule 21.11.2014
comment
hasFocus: editMode я не получаю фокус, если пытаюсь здесь jsfiddle.net/supercool/2yg1Lbe7/1< /а> - person super cool; 21.11.2014
comment
К сожалению, проблема с размещением, я думаю :) мы должны разместить hasfocus на последнем месте, чтобы получить его идеальную функциональность. Спасибо, очень полезно - person super cool; 22.11.2014