在按鍵事件的MM/YYYY文本框中插入「/」

Question

我想在用戶輸入MM（2位數）時輸入「/」，因此它將像MM/YYYY一樣。

我已經做了類似的信用卡號碼輸入，它在按鍵後4位數後插入空格。

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

這適用於

• 普通鍵盤輸入
• 複製/剪切/粘貼
• 選定的文本

添加/

因爲你編程添加/人物，你必須更新光標位置時影響新的輸入值。如果用戶正在粘貼某些東西，則這可以是一個以上的字符。大部分的代碼複雜度都圍繞這個問題展開。

在代碼中有很多評論解釋由於/而出現的各種情況。

全碼

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

嘗試：

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">