Gibt es maskiertes Eingabe-Plugin für knockout.js mit Extendern?

Question

Ich habe diese post gesehen - es zeigt eine mögliche Lösung. Aber ich hätte gerne eine elegantere Art, maskierte Eingaben zu machen.

Es sollte auch gut mit Knockout Validierung Plugin spielen (oder vielleicht erweitern).

Wer weiß, wie es dort ähnliche Projekt gibt?

Answer 1

Nehmen Sie einfach den Code aus der Antwort auf diesen Link und steckte es in einen Extender (Geschriebene auf der freien Hand können Fehler haben)

ko.extenders.masked = function(observable, options) { 
    return ko.computed({ 
     read: function() { 
      return '$' + this.observable().toFixed(2); 
     }, 
     write: function(value) { 
      // Strip out unwanted characters, parse as float, then write the raw data back to the underlying observable 
      value = parseFloat(value.replace(/[^\.\d]/g , "")); 
      observable(isNaN(value) ? 0 : value); // Write to underlying storage 
     } 
    }); 
}; 

bearbeiten: Sie wahrscheinlich die Maske als Optionen angeben möchten statt zu haben es

Update auf USD etc fest einprogrammiert: Wenn Sie tun, um die Maske Plugin von riceboyler Antwort aber mit Streck Sie können verwenden möchten

ko.extenders.mask = function(observable, mask) { 
    observable.mask = mask; 
    return observable; 
} 


var orgValueInit = ko.bindingHandlers.value.init; 
ko.bindingHandlers.value.init = function(element, valueAccessor) { 
    var mask = valueAccessor().mask; 
    if(mask) { 
     $(element).mask(mask); 
    } 

    orgValueInit.apply(this, arguments); 
} 

http://jsfiddle.net/rTK6G/

Answer 2

Wenn Sie die ausgezeichneten Masked Input Plugin in Knockout, ist es ziemlich einfach, eine grundlegende Gewohnheit zu schreiben Bindung anstatt ein Extender verwenden wollen.

ko.bindingHandlers.masked = { 
    init: function(element, valueAccessor, allBindingsAccessor) { 
     var mask = allBindingsAccessor().mask || {}; 
     $(element).mask(mask); 
     ko.utils.registerEventHandler(element, 'focusout', function() { 
      var observable = valueAccessor(); 
      observable($(element).val()); 
     }); 
    }, 
    update: function (element, valueAccessor) { 
     var value = ko.utils.unwrapObservable(valueAccessor()); 
     $(element).val(value); 
    } 
}; 

Und dann in Ihrem HTML:

<input type="text" data-bind="masked: dateValue, mask: '99/99/9999'" /> 
<input type="text" data-bind="masked: ssnValue, mask: '999-99-9999'" /> 

Und so weiter mit verschiedenen Masken. Auf diese Weise können Sie die Maske einfach in Ihre Datenbindung einfügen und es ermöglicht eine Menge Flexibilität.

Answer 3

Ich habe versucht, die erste Antwort zu verwenden, aber es funktionierte nicht mit ko.validation Plug-in. Meine Validierungsfehler wurden nicht angezeigt.

Ich wollte ein bisschen intuitiver Ko-Binder haben. Hier ist meine Lösung. Ich benutze jquery.inputmask Plug-in. Ich lösche auch die Eigenschaft auf meinem Viewmodel, wenn nicht Wert eingegeben.

ko.bindingHandlers.mask = { 
     init: function (element, valueAccessor, allBindingsAccessor, viewModel,  bindingContext) { 
      var mask = valueAccessor() || {}; 
      $(element).inputmask({ "mask": mask, 'autoUnmask': false }); 
      ko.utils.registerEventHandler(element, 'focusout', function() { 
       var value = $(element).inputmask('unmaskedvalue');    
       if (!value) { 
        viewModel[$(element).attr("id")]("");     
       } 
      }); 
     } 
    }; 

Hier ist die Nutzung ist:

<input type="text" data-bind="value: FEIN, mask: '99-9999999'" id="FEIN" > 

Answer 4

Sie diese hausgemachte Lösung nutzen können, arbeiten perfekt für mich:

Meine Bindung Knockout Anruf aus dem Netz inspiriert maskiert, fügte ich einige verwalteten Sprache und von verschiedenen Ereignissen aktualisieren. Auch ich benutze diese js-Bibliothek für die Verwendung im Grunde: https://plugins.jquery.com/maskedinput/

Sie können in meiner verbindlichen den Begriff "allBindingsAccessor().Maske“diese aus der Bibliothek ist maskedinput

ko.bindingHandlers.masked = { 
    init: function (element, valueAccessor, allBindingsAccessor) { 
     var mask = allBindingsAccessor().mask || {}, 
     getCaretPosition, 
     setCaretPosition; 

     // Permet d'obtenir la position du curseur 
     getCaretPosition = function getCaretPosition(element) { 
      // Initialise la position 
      var caretPos = 0, sel; 

      // IE 
      if (document.selection) { 
       // Donne le focus à l'élément 
       element.focus(); 
       // Afin d'obtenir la position du curseur 
       sel = document.selection.createRange(); 
       // On place le curseur à 0 
       sel.moveStart('character', -element.value.length); 
       caretPos = sel.text.length; 
      } 
       // Firefox 
      else if (element.selectionStart || element.selectionStart === '0') { 
       caretPos = element.selectionStart; 
      } 
      return (caretPos); 
     }; 

     // Permet de définir la position du curseur en fonction d'une position donnée 
     setCaretPosition = function setCaretPosition(element, pos) { 
      var range; 
      if (element.setSelectionRange) { 
       element.focus(); 
       element.setSelectionRange(pos, pos); 
      } 
      else if (element.createTextRange) { 
       range = element.createTextRange(); 
       range.collapse(true); 
       range.moveEnd('character', pos); 
       range.moveStart('character', pos); 
       range.select(); 
      } 
     }; 

     // Définition du masque inséré dans le champ 
     if (configSvc.culture === "fr-FR") { 
      // Cas francais 
      $(element).mask("99/99/9999", { placeholder: "JJ/MM/AAAA" }); 
     } 
     else { 
      // Cas anglophone 
      $(element).mask("99/99/9999", { placeholder: "MM/DD/YYYY" }); 
     } 

     // On capte l'événement d'appuie sur une touche 
     ko.utils.registerEventHandler(element, 'keypress', function() { 
      var observable = valueAccessor(), 
       position; 
      // Afin de résoudre le pb de déplacement du curseur a la fin du mask lors de la mise à jour de l'observable knockout 
      if ($(element).val().length === 10) { 
       // On récupère la dernière position 
       position = getCaretPosition(this); 
       // On met à jour la valeur de l'obersable (en cas de sauvegarde) 
       observable($(element).val()); 
       // On force la position du curseur apres mise à jour de l'observable à la derniere position récupéré 
       setCaretPosition(this, position); 
      } 
     }); 

     // On capte l'événement de perte de focus pour mettre l'obersable à jour 
     ko.utils.registerEventHandler(element, 'blur', function() { 
      var observable = valueAccessor(); 
      observable($(element).val()); 
     }); 

     // On capte l'événement change pour mettre l'obersable à jour 
     ko.utils.registerEventHandler(element, 'change', function() { 
      var observable = valueAccessor(); 
      observable($(element).val()); 
     }); 
    }, 
    update: function (element, valueAccessor) { 
     var value = ko.utils.unwrapObservable(valueAccessor()); 
     $(element).val(value); 
    } 

}; 

in meinem HTML-Seite, ich diese beobachtbaren verwenden "maskiert":

<input type="text" id="head-birthDate" class="form-control" data-bind="masked: birthDate" /> 

schließlich in meine js:

birth ist nur eine beobachtbare

this.birthDate = ko.observable(); 

Answer 5

Gut gemacht, risboyler.Ich nahm Ihren Code und erweiterte es ein wenig, um die "pla ceholder“Eigenschaft des Masked Input Plugin:

ko.bindingHandlers.masked = { 
     init: function (element, valueAccessor, allBindingsAccessor) { 
      var mask = allBindingsAccessor().mask || {}; 
      var placeholder = allBindingsAccessor().placeholder; 
      if (placeholder) { 
       $(element).mask(mask, { placeholder: placeholder }); 
      } else { 
       $(element).mask(mask); 
      } 
      ko.utils.registerEventHandler(element, "blur", function() { 
       var observable = valueAccessor(); 
       observable($(element).val()); 
      }); 
     }, 
     update: function (element, valueAccessor) { 
      var value = ko.utils.unwrapObservable(valueAccessor()); 
      $(element).val(value); 
     } 
    }; 

HTML mit Platzhalter:

<input id="DOB" type="text" size="12" maxlength="8" data-bind="masked: BirthDate, mask: '99/99/9999', placeholder: 'mm/dd/yyyy', valueUpdate: 'input'"/> 

HTML ohne Platzhalter:

<input id="DOB" type="text" size="12" maxlength="8" data-bind="masked: BirthDate, mask: '99/99/9999', valueUpdate: 'input'"/> 

Die KO-Bindung funktioniert so oder so.