在按键事件的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">