KnockoutJs Bindung für Eingabe-Tag zur Formatnummer mit Komma

Question

Gibt es eine Bindung, um einen Eingabewert von 123456789 zu 123,456,789 zu formatieren. Die Bindung sollte bei jedem Tastendruck funktionieren und den Wert validieren, wenn es sich um eine gültige Zahl handelt. Ich habe dieses solution gefunden, aber es formatiert nicht auf Tastendruck.

Answer 1

Ich endete beim Erstellen benutzerdefinierte Bindung. Es funktioniert nur auf IE10 und höher für die Verwendung von event input. Hier ist der Code. Siehe Geige here.

String.prototype.countOccurence = function(char){ 
    return (this).split(char).length - 1; 
} 

$.fn.selectRange = function(start, end){ 
    if(end === undefined) 
    end = start; 
    return this.each(function() { 
    if("selectionStart" in this){ 
     this.selectionStart = start; 
     this.selectionEnd = end; 
    } else if(this.setSelectionRange) 
     this.setSelectionRange(start, end); 
    else if(this.createTextRange){ 
     var range = this.createTextRange(); 
     range.collapse(true); 
     range.moveEnd("character", end); 
     range.moveStart("character", start); 
     range.select(); 
    } 
    }); 
}; 

ko.helper = {}; 

ko.helper['toNumber'] = function (value, limit){ 
    limit = limit || 10; 
    var num = Number((value || "").toString().replace(/[^0-9]/gi, "").substring(0, limit)); 
    return num; 
} 

ko.bindingHandlers['formatNumber'] = { 
    init: function(element, valueAccessor, allBindings){ 
     var value = valueAccessor(); 
     var limit = allBindings.get("limit") || 10; //billion 
     var position = 0; 
     var navigationKeys = [33, 34, 35, 36, 37, 38, 39, 40, 9]; 
     var isBackSpace = false; 
     var oldLengthValue = (value() || "").toString().length; 

     function isKeyControls(e){ 
        if(e.ctrlKey && (e.keyCode == 67 || e.keyCode == 86 || e.keyCode == 65)){ 
         return true; 
        } 
        if(e.shiftKey && (e.keyCode == 37 || e.keyCode == 39)){ 
         return true; 
        } 

        return false; 
       } 

     $(element).on("keyup", function(e) { 
        if(this.selectionStart == this.value.length) 
         return; 

        if(isKeyControls(e) || e.shiftKey){ 
         return; 
        } 

        var navigation = (e.keyCode == 37 
              ? -1 
              : e.keyCode == 39 
               ? 1 
               : 0); 
        var customSelectionStart = this.selectionStart; // + navigation; 
        //customSelectionStart = customSelectionStart 
        var positionMinusOne = customSelectionStart == 0 
               ? -1 
               : customSelectionStart; 

        positionMinusOne = positionMinusOne + (positionMinusOne == -1 ? 0 : navigation); 
        var previousCharacter = positionMinusOne == -1 
               ? "" 
               : this.value.substring(customSelectionStart - 1, customSelectionStart); 

        if(previousCharacter == ","){ 
         $(this).selectRange(customSelectionStart + 
         (isBackSpace ? -1 : 0)); 
        } 

        var currentCommaOccurence = this.value.countOccurence(","); 
        var commaValue = oldLengthValue > currentCommaOccurence ? -1 
             : oldLengthValue < currentCommaOccurence ? 1 
               : 0; 
        if(commaValue != 0){ 
         $(this).selectRange(customSelectionStart + 
          commaValue); 
        } 

        oldLengthValue = this.value.countOccurence(","); 
       }); 

     $(element).on("keydown", function (e) { 
        if (isKeyControls(e)) { 
         return; 
        } 

        var navigation = (e.keyCode == 37 
              ? -1 
              : e.keyCode == 39 
               ? 1 
               : 0); 
        var customSelectionStart = this.selectionStart + navigation; 
        //customSelectionStart = customSelectionStart 
        var positionMinusOne = customSelectionStart == 0 
               ? -1 
               : customSelectionStart; 

        positionMinusOne = positionMinusOne + (positionMinusOne == -1 ? 0 : navigation); 
        var previousCharacter = positionMinusOne == -1 
               ? "" 
               : this.value.substring(customSelectionStart - 1, customSelectionStart); 

        if(previousCharacter == ",") 
         $(this).selectRange(customSelectionStart); 

        isBackSpace = e.keyCode == 8; 
        if(isBackSpace) 
         return; 

        //Navigation 
        if(navigationKeys.some(function(key) { 
         return key == e.keyCode; 
        })) 
         return; 

        //Other Keys 
        var isNumber = (e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105); 
        var isLimit = (limit + parseInt(limit/3)) == this.value.length; 
        if(!(isNumber) 
         || isLimit){ 
         e.preventDefault(); 
         return; 
        } 
       }); 

     $(element).on("input", function(e, a, b, c) { 
        console.log(this.selectionStart, this.selectionEnd); 
        var convertedValue = ko.helper.toNumber(this.value, limit); 
        var formatted = convertedValue 
             ? ko.helper.toNumber(this.value, limit).toLocaleString() 
             : ""; 
        position = this.selectionStart == this.value.length 
            ? formatted.length 
            : this.selectionStart; 
        value(convertedValue || ""); 
        this.value = formatted; 
        $(this).selectRange(position); 
       }); 

     ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
        $(element).off(); 
       }); 

     ko.bindingHandlers["formatNumber"].update(element, valueAccessor, allBindings); 
    }, 
    update: function(element, valueAccessor, allBindings){ 
     var value = valueAccessor(); 
     var limit = allBindings.get("limit") || 10; //billion     
     var convertedValue = ko.helper.toNumber(value(), limit); 
     var formatted = convertedValue 
          ? ko.helper.toNumber(value(), limit).toLocaleString() 
          : ""; 
     element.value = formatted; 
    } 
};