reactjs 难以删除斜线附近的字符

9rygscc1  于 2023-05-22  发布在  React
关注(0)|答案(1)|浏览(93)
function formatDate(input) {
  // Remove non-numeric characters from the input
  let numericValue = input.value.replace(/\D/g, '');

  // Add a slash immediately after the 2nd character
  if (numericValue.length > 1 && numericValue.charAt(2) !== '/') {
    numericValue = numericValue.slice(0, 2) + '/' + numericValue.slice(2);
  }

  // Add a slash immediately after the 5th character
  if (numericValue.length > 4 && numericValue.charAt(5) !== '/') {
    numericValue = numericValue.slice(0, 5) + '/' + numericValue.slice(5);
  }

  input.value = numericValue;
}

所提供的formatDate函数旨在通过在特定位置立即添加斜杠(/)来格式化日期输入。该函数从输入中删除非数字字符,然后在第2个和第5个字符后插入斜杠。但是,当用户试图从输入字段中的右到左删除字符时,会出现问题。
当用户尝试删除斜线附近的字符时,删除将在斜线处停止,要求用户手动删除每个字符。例如,如果日期是“05/18/2023”,并且用户想要删除“18”部分,则光标将停止在“2”之后的斜线处。
我会很感激任何关于如何解决这个问题的见解或建议,并允许用户顺利删除字符,包括那些靠近斜线的字符,或者是否有任何其他方法来满足我的要求(在第二个和第五个字符后自动添加斜线)

tmb3ates

tmb3ates1#

你可以使用下面的代码

<input type="text" id="inputField" maxlength="10">
const inputField = document.getElementById('inputField');//get your input field

inputField.addEventListener('keypress', function (e) {
    if (!/^([0-9])$/.test(e.key)) {//check if the key is number
        return e.preventDefault();
    }
});

inputField.addEventListener('input', function (e) {
    let temp = this.value.split("/").join(""), valLength = this.value.length;
    if (this.value.length > 5) {
        this.value = temp.slice(0, 2) + '/' + temp.slice(2, 4) + '/' + temp.slice(4);
    } else if (this.value.length > 2) {
        this.value = temp.slice(0, 2) + '/' + temp.slice(2);
    }
});

请注意,如果用户试图删除斜杠前的任何字符,例如日期12/09/2002,如果用户试图删除任何字符从05,那么光标将跳转到最后一个位置,并且用户不能删除/,如果光标后面有其他数字。所以最好的做法是从最后删除和添加数字。

相关问题