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

9rygscc1 于 2023-05-22 发布在 React

关注(0)|答案(1)|浏览(94)

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”之后的斜线处。
我会很感激任何关于如何解决这个问题的见解或建议，并允许用户顺利删除字符，包括那些靠近斜线的字符，或者是否有任何其他方法来满足我的要求（在第二个和第五个字符后自动添加斜线）

reactjs

来源：https://stackoverflow.com/questions/76280473/difficulty-in-deleting-characters-near-slashes

1条答案

按热度按时间

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，如果用户试图删除任何字符从0到5，那么光标将跳转到最后一个位置，并且用户不能删除/，如果光标后面有其他数字。所以最好的做法是从最后删除和添加数字。

赞(0）回复(0）举报 2023-05-22

我来回答

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

1条答案

相关问题

热门标签

最新问答