Плагин Knockout textInput и maskedinput

Есть ли простой способ использовать data-bind="textInput: aProperty" и добавить маску ввода или автоматическое форматирование по мере ввода пользователем?

Использование плагина маскированного ввода работает, но я теряю ", которые обеспечивает "textInput:" Knockout, поэтому другие части скрипта видят изменение только после того, как поле теряет фокус (фактически ведет себя как старая простая привязка "value:" в Knockout).

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

Могу ли я сделать так, чтобы эти две библиотеки хорошо взаимодействовали друг с другом, или мне нужно сделать собственное решение? Они делают много вещей в своих обработчиках событий, чтобы быть совместимыми со всеми браузерами, поэтому неудивительно, что их сложно заставить работать вместе, но именно поэтому я не хочу возиться со всеми этими keyup, input , изменение, события сам.

Все предыдущие ответы на StackOverflow не возражают против распространения изменений только после того, как поле потеряет фокус. Возможно, эти ответы были опубликованы до того, как textInput был добавлен в Knockout, поэтому в то время не было ничего лучше. Вот почему я задаю новый вопрос.


javascript jquery knockout.js maskedinput
person marcus    schedule 22.05.2015    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Я написал скрипку, которая использует только вычисляемую наблюдаемую, и у меня нет проблем с фокусировкой. Это работает так, как вы ожидаете?

var displayString = ko.observable('');
var formattedString = ko.computed({
    read: function () {
        return displayString();
    },
    write: function (newValue) {
        var f = format(newValue);
        console.debug("Format", newValue, "=", f);
        displayString(f);
    }
});

http://jsfiddle.net/csmmnq25/

person Roy J    schedule 22.05.2015
comment
Похоже, вы не можете добавить что-либо в конце (например, «.00»), не перемещая курсор и не испортив все (включая Backspace). Это не совсем то же самое поведение, которое я видел раньше, но, похоже, оно связано. - person marcus; 25.05.2015
comment
Каждый раз, когда значение перезаписывается, курсор позиционируется в конце. Это нормально, если вы добавляете в конец, но проблема, если вы редактируете в середине. Позиционирование курсора в поле может быть сложным, в зависимости от форматирования. - person Roy J; 25.05.2015
comment
Я предполагаю, что проблема с фокусом, которая у меня была, связана с KO foreach (у меня есть несколько входных данных в таблице). Я буду использовать ваше решение, когда моя форма не зацикливается, и я не ожидаю, что пользователь вставит что-то в середину (и любое число потребует редактирования в середине, если я буду автоматически добавлять центы после каждого нажатия клавиши...) - person marcus; 25.05.2015
comment
Хорошо, моя проблема с фокусом возникает, когда я использую комбинацию foreach AND template. Вероятно, это заслуживает другого вопроса (или сообщения об ошибке...) - person marcus; 26.05.2015