Geben Sie "/" in MM/YYYY Textfeld bei Tastendruckereignis ein

Question

Ich möchte ein "/" eingeben, wenn Benutzer MM (2-stellig) eingeben, so wird es wie MM/YYYY sein.

Ich habe ähnliche für Kreditkartennummern eingegeben, die ein Leerzeichen nach 4 Ziffern auf Tastendruck einfügen.

let ccNumber = e.target.value.split(" ").join(""); 
     if (ccNumber.length > 0) { 
     ccNumber = ccNumber.match(new RegExp('.{1,4}', 'g')).join(" "); 
     } 
e.target.value = ccNumber; 

Answer 1

Fiddle

Dies funktioniert mit

• Regular Tastatureingabe
• Kopieren/Ausschneiden/Einfügen
• Ausgewählter Text

Hinzufügen die /

Weil Du programmatisch den / Charakter Hinzufügen ist, müssen Sie die Cursor-Position aktualisieren, wenn das den neuen Eingabewert beeinflusst . Dies kann mehr als ein Zeichen sein, wenn der Benutzer etwas anfügt. Die meiste Komplexität des Codes dreht sich um dieses Problem.

Es gibt viele Kommentare im Code, die die verschiedenen Situationen erklären, die wegen der / entstehen.

Voll-Code

var date = document.getElementById('date'); 
 

 
date.addEventListener('keypress', updateInput); 
 
date.addEventListener('change', updateInput); 
 
date.addEventListener('paste', updateInput); 
 
date.addEventListener('keydown', removeText); 
 
date.addEventListener('cut', removeText); 
 

 
function updateInput(event) { 
 
    event.preventDefault(); 
 
    var string = getString(event); 
 
    var selectionStart = this.selectionStart; 
 
    var selectionEnd = this.selectionEnd; 
 
    var selectionLength = selectionEnd - selectionStart; 
 
    var sanitizedString = string.replace(/[^0-9]+/g, ''); 
 
    // Do nothing if nothing is added after sanitization 
 
    if (sanitizedString.length === 0) { 
 
    \t return; 
 
    } 
 
    // Only paste numbers that will fit 
 
    var valLength = date.value.replace(/[^0-9]+/g, '').length; 
 
    var availableSpace = 6 - valLength + selectionLength; 
 
    // If `/` is selected it should not count as available space 
 
    if (selectionStart <= 2 && selectionEnd >= 3) { 
 
    \t availableSpace -= 1; 
 
    } 
 
    // Remove numbers that don't fit 
 
    if (sanitizedString.length > availableSpace) { 
 
    \t sanitizedString = sanitizedString.substring(0, availableSpace); 
 
    } 
 
    var newCursorPosition = selectionEnd + sanitizedString.length - selectionLength; 
 
    // Add one to cursor position if a `/` gets inserted 
 
    if (selectionStart <= 2 && newCursorPosition >= 2) { 
 
    newCursorPosition += 1; 
 
    } 
 
    // Previous input value before current cursor position 
 
    var valueStart = date.value.substring(0, this.selectionStart); 
 
    // Previous input value after current cursor position 
 
    var valueEnd = date.value.substring(this.selectionEnd, date.value.length); 
 
    var proposedValue = valueStart + sanitizedString + valueEnd; 
 
\t // Remove anything that's not a number 
 
    var sanitized = proposedValue.replace(/[^0-9]+/g, ''); 
 
    format(sanitized); 
 
    this.setSelectionRange(newCursorPosition, newCursorPosition); 
 
} 
 

 
function removeText(event) { 
 
    if (event.key === 'Backspace' || event.type === 'cut') { 
 
    event.preventDefault(); 
 
    var selectionStart = this.selectionStart; 
 
    var selectionEnd = this.selectionEnd; 
 
    var selectionLength = selectionEnd - selectionStart; 
 
    // If pressing backspace with no selected text 
 
    if (selectionLength === 0 && event.type !== 'cut') { 
 
    \t selectionStart -= 1; 
 
     // Remove number from before `/` if attempting to delete `/` 
 
     if (selectionStart === 2) { 
 
     selectionStart -= 1; 
 
     } 
 
    } 
 
    var valueStart = date.value.substring(0, selectionStart); 
 
    var valueEnd = date.value.substring(selectionEnd, date.value.length); 
 
    // Account for added `/` 
 
    if (selectionStart === 2) { 
 
     selectionStart += 1; 
 
    } 
 
    var proposedValue = valueStart + valueEnd; 
 
    var sanitized = proposedValue.replace(/[^0-9]+/g, ''); 
 
    format(sanitized); 
 
    this.setSelectionRange(selectionStart, selectionStart); 
 
    } 
 
} 
 

 
function getString(event) { 
 
\t if (event.type === 'paste') { 
 
    var clipboardData = event.clipboardData || window.clipboardData; 
 
    return clipboardData.getData('Text'); 
 
    } else { 
 
    \t return String.fromCharCode(event.which); 
 
    } 
 
} 
 

 
function format(sanitized) { 
 
\t var newValue; 
 
    var month = sanitized.substring(0, 2); 
 
    if (sanitized.length < 2) { 
 
    \t newValue = month; 
 
    } else { 
 
    \t var year = sanitized.substring(2, 6); 
 
    newValue = month + '/' + year; 
 
    } 
 
    date.value = newValue; 
 
}

<input id="date" type="text" maxlength="7">

Answer 2

Versuchen:

var date = document.getElementById('date'); 
 

 
date.addEventListener('keypress', function (event) { 
 
    var char = String.fromCharCode(event.which), 
 
     offset = date.selectionStart; 
 
    console.log(offset) 
 
    if (/\d/.test(char) && offset < 7) { 
 
     
 
     if (offset === 2) { 
 
      offset += 1; 
 
     } 
 
     date.value = date.value.substr(0, offset) + char + date.value.substr(offset + 1); 
 
     date.selectionStart = date.selectionEnd = offset + 1; 
 
    } 
 
    
 
    if (!event.keyCode) { 
 
     event.preventDefault(); 
 
    } 
 
});

<input id="date" type="text" value="mm/yyyy" maxlength="6" size="6">