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

Question

У меня есть представление с текстовым полем типа Number, и я успешно проверяю, вводлю ли я числовые или нет, используя плагин проверки выбивания

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

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

Вот моя скрипка

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

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

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

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

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

Я думал что-то вроде этого:

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

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

3) подписаться же

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

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

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

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

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