网页文本框限制输入的格式为1999-01-02，输入数字后 -

2023-09-24 本文已影响0人天马行空_9f6e

<!DOCTYPE html>

<html>

<head>

<title>限制输入格式</title>

</head>

<body>

<input type="text" id="dateInput" onkeypress="limitInput(event)" onkeyup="formatDate(event)">

<script>

function limitInput(event) {

const input = event.target;

const maxLength = 8; // 最大允许输入 8 个数字

if (input.value.replace(/[^0-9]/g, '').length >= maxLength && event.keyCode !== 8) { // keyCode 为 8 表示 Backspace 键

event.preventDefault();

}

function formatDate(event) {

const input = event.target;

let value = input.value.replace(/[^0-9]/g, ''); // 移除非数字字符

if (value.length > 8) {

value = value.substr(0, 8); // 限制输入长度为 8

}

if (value.length >= 5) { // 处理年份和月份

value = value.replace(/^(\d{4})(\d{0,2})(\d{0,2})/, function(match, p1, p2, p3) {

// 限制月份最小为 01，最大为 12

const month = p2 ? Math.min(Math.max(parseInt(p2, 10), 1), 12).toString().padStart(2, '0') : '';

// 限制日期最小为 01，最大为 30

const date = p3 ? Math.min(Math.max(parseInt(p3, 10), 1), 30).toString().padStart(2, '0') : '';

return p1 + (month ? '-' + month : '') + (date ? '-' + date : '');

});

}

input.value = value;

}

</script>

</body>

</html>

————————————————

原文链接：https://blog.csdn.net/dante1987/article/details/133267906