Javascript: 'Problem?' auf die Aktualisierung der Benutzereingabe in tausend Zahlen in einem Textfeld

Question

Ich überprüfe diesen Code gefunden auf einer Frage, die hier in Bezug auf das Hinzufügen von Kommas, während der Benutzer eine Nummer eingab.

$('input.number').keyup(function(event) { 
    // skip for arrow keys 
    if(event.which >= 37 && event.which <= 40) return; 
    // format number 
    $(this).val(function(index, value) { 
    return value 
    .replace(/\D/g, "") 
    .replace(/\B(?=(\d{3})+(?!\d))/g, ","); 
    }); 
}); 

~ @macek

Pfeiltaste überspringen funktioniert gut und der Rest. Das einzige Problem ist, wenn Sie Eingabe zwischendurch oder die Ziffern aktualisieren lassen, sagt ich

„1234789“

Hinweis geben, dass ich nicht über die Nummern 5 und 6 zwischen den Zahlen zu vervollständigen 1 bis 9 jetzt, als ich versuchte, 5 und 6 zu aktualisieren und das Ergebnis ist "123,457,896". Der Grund, warum der 6 zum letzten Teil ging, war der Cursor bewegt sich automatisch im letzten Teil der zweiten Taste gedrückt.

Gibt es eine Möglichkeit, den Cursor an seiner aktuellen Position zu halten? Ich bin nicht sicher, ob dies wegen der Keyup-Funktion war Auch was ich versuche zu lösen ist, wie man (STRG + A) Kopieren Sie alle Textarbeit?

Durch die Art, wie ich noch nicht in regex gewohnt bin, aber eine tiefere Erklärung von Regex in dem obigen Beispiel gegeben ist ein Plus :)

Answer 1

EDIT: Hinzugefügt: Strg-Taste möglich UND SHIFT Auswahl

Hier ist, wie:

$('input.number').keyup(function(event) { 
    // skip for arrow keys 
    if(event.which >= 37 && event.which <= 40) return; 
    if (event.ctrlKey) return; 
    if (event.which == 17) return; // CTRL Key 
    if (event.which == 16) return; // Shift Key 

    //Get old values 
    var oldPosition = $(this)[0].selectionStart; 
    var oldLength = $(this).val().length; 

    // format number 
    $(this).val(function(index, value) { 
    return value 
    .replace(/\D/g, "") 
    .replace(/\B(?=(\d{3})+(?!\d))/g, ","); 
    }); 

    //Set caret position 
    var offset = $(this).val().length - oldLength; 
    $(this)[0].selectionStart = oldPosition + offset ; 
    $(this)[0].selectionEnd = oldPosition + offset ; 
}); 

Answer 2

Dieser Ansatz toLocaleString, um die Anzahl neu formatiert, nachdem es geändert wurde, verwendet. Da kein Gebietsschema übergeben wird, wird der Standard des Browsers verwendet, der jedem Benutzer vertraut sein sollte.

document.getElementById("num-input").addEventListener("change", function(event) { 
    var intVal = parseInt(this.value); 
    if (!isNaN(intVal)) { 
    this.value = intVal.toLocaleString(); 
    } 
    console.log(this.value); 
});