extendersを使用してknockout.jsのマスク入力プラグインがありますか？

Question

私はこれを見ましたpost - それは可能な解決策を示しています。しかし、私はマスクされた入力を行うよりエレガントな方法を持っていたいと思います。

また、ノックアウト検証プラグインでうまく再生する必要があります（または拡張することもできます）。

誰もがそこに同様のプロジェクトがあるのを知っていますか？

Answer 1

ジャスト（エラーを持つことができる無料の手の上に書かれた、）そのリンクでの答えからコードを取得し、エクステンダーに入れ

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 
     } 
    }); 
}; 

編集：あなたは、おそらく代わりに、オプションとしてマスクを供給したいですUSDのなどにハードコードさ

更新、それを持つの：あなたはriceboylerの答えからではなく、エクステンダーでマスクプラグインを使用したい場合は をあなた は

を行うことができます

http://jsfiddle.net/rTK6G/

Answer 2

あなたはノックアウトで優れたMasked Input Pluginを使用したい場合は、それが基本的なカスタムバインディングではなく、エクステンダーを書くために非常に簡単です。

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); 
    } 
}; 

そして、あなたのHTML内

：

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

などなど、様々なマスクで。こうすることで、データバインディングの中にマスクを置くだけで、柔軟性を実現できます。

Answer 3

最初の回答を使用しようとしましたが、ko.validationプラグインで動作しませんでした。私の検証エラーは表示されませんでした。

少し直感的なコバインダーを使いたいと思っていました。ここに私の解決策があります。 jquery.inputmaskプラグインを使用しています。値が入力されていない場合は、ビューモデルのプロパティも消去します。ここで

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")]("");     
       } 
      }); 
     } 
    }; 

は、使用ある：

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

Answer 4

あなたは私のために完璧に動作し、この手作りのソリューションを使用することができます。

ネットからインスピレーションを得たマスクされマイバインディングノックアウト呼び出し、私はいくつかの管理言語を追加しました異なるイベントから更新することができます。 また、私は基本的に使用するためにこのjsライブラリを使用します：https://plugins.jquery.com/maskedinput/

あなたは私のバインディングで "allBindingsAccessor（）"という用語を見ることができます。

私のjsファイルで最後に

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

：

たbirthDateは単なる観測可能

である "マスクされた「これは私のhtmlページで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); 
    } 

}; 

ライブラリーから、私はこの観測可能に使用される" マスク

this.birthDate = ko.observable(); 

Answer 5

よくやった、米ボイラー。私はあなたのコードを取り、それを少し拡張して "pla仮面の入力プラグインのceholder」プロパティ：プレースホルダと

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：プレースホルダなし

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

HTML：

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

KO結合作品のいずれかの方法。