Kartennummer Regex und Cursor/Cursor-Position (Javascript)

Question

Ich habe eine Regex, um eine Kreditkartennummer in 4 Gruppen von 4 Ziffern aufzuteilen.

Die Regex funktioniert ein Vergnügen, aber wenn ich zurück in die Zeichenfolge gehen und es bearbeiten möchte springt der Cursor an das Ende der Auswahl.

<input id= "cardNumber" maxlength="19" type="tel"/> 

JS wie folgt:

document.getElementById('cardNumber').addEventListener('input', function (e) { 

var field = e.target; 

field.value = field.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim(); 

}); 

Offensichtlich möchte ich nicht der Cursor an das Ende des Eintrags springen. Ich habe mit Caret-Positionen gespielt, SelectionStart and End, aber bisher kein Glück.

Alle Hinweise sehr geschätzt.

sehen jsfiddle hier: https://jsfiddle.net/oo7Ljm4j/1/

Answer 1

OK also nach einigem Graben habe ich die Antwort gefunden!

Durch die Verwendung von field.selectionEnd und das Zurücksetzen auf jeden (on) -Eingabe bleibt der Cursor dort, wo Sie ihn bearbeiten möchten.

Das Problem rührt von der Tatsache her, dass die Regex das ENTIRE-Feld erneut rendert und aktualisiert, wenn Sie eine Änderung vornehmen (der Cursor wird dann standardmäßig auf das Ende des Werts gesetzt, wenn die Regex als Browser denkt, dass Sie jedes Mal fertig sind.)

document.getElementById('cardNumber').addEventListener('input', function (e) { 

    var field = e.target, position = field.selectionEnd, length = field.value.length; 


    field.value = field.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim(); 


    field.selectionEnd = position += ((field.value.charAt(position - 1) === ' ' && field.value.charAt(length - 1) === ' ') ? 1 : 0);  
}); 

diese Weise können wir den Cursor doch sagen, neu zu berechnen, es Position auf jedem Eingang selectionEnd ist.

Schauen Sie sich die Arbeits JSFiddle aqui: https://jsfiddle.net/oo7Ljm4j/6/

Answer 2

Sie keyup nur überprüfen, ob Schlüssel zurück ist die eine Presse nichts tun

document.getElementById('cardNumber').addEventListener('keyup', function (e) { 
    var key = event.which || event.keyCode || event.charCode; 
    var field = e.target; 
    if (key !== 8) { 
    field.value = field.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim(); 
    } 
}); 

DEMO

ODER

Sie erstellen können verwenden können Eine Funktion a Verwenden Sie diese in jedem Schlüsselereignis in Ihrer Texteingabe vollständig deaktiviert nicht ganz char und pr Ereignis einfügen nicht integer char

document.getElementById('cardNumber').addEventListener('keyup', format); 
document.getElementById('cardNumber').addEventListener('keydown', format); 
document.getElementById('cardNumber').addEventListener('copy', format);  
document.getElementById('cardNumber').addEventListener('keypress', format); 

function format(e) { 
    var key = event.which || event.keyCode || event.charCode; 
    var field = e.target; 
    if (key !== 8) { 
     field.value = field.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim(); 
    } 
} 

DEMO

KÖNNEN SIE AUCH Pfeile akzeptieren, wenn dies im Fall diese Bedingung hinzufügen

(key < 37 || key > 39) 

so Ihr Zustand wie diese

if (key !== 8 && (key < 37 || key > 39)) { 
    field.value = field.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim(); 
} 

wird

DEMO