插入＆＃34; /＆＃34;在按键事件的MM / YYYY文本框中

Question

我想输入＆＃34; /＆＃34;当用户输入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

尝试：

＆＃13;

＆＃13;

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();
    }
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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) {
  	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) {
  	availableSpace -= 1;
  }
  // Remove numbers that don't fit
  if (sanitizedString.length > availableSpace) {
  	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;
	// 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') {
    	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) {
	if (event.type === 'paste') {
    var clipboardData = event.clipboardData || window.clipboardData;
    return clipboardData.getData('Text');
  } else {
  	return String.fromCharCode(event.which);
  }
}

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

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