function formatPhoneNumber(value) {
if (!value) return value;
const phoneNumber = value.replace(/[^\d]/g, '');
const phoneNumberLength = phoneNumber.length;
if (phoneNumberLength < 4) return phoneNumber;
if (phoneNumberLength < 7) {
return `(${phoneNumber.slice(0, 3)}) ${phoneNumber.slice(3)}`;
}
return `(${phoneNumber.slice(0, 3)}) ${phoneNumber.slice(
3,
6
)}-${phoneNumber.slice(6, 9)}`;
}
function phoneNumberFormatter() {
const inputField = document.getElementById('phone-number');
const formattedInputValue = formatPhoneNumber(inputField.value);
inputField.value = formattedInputValue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="home.css">
<title>Document</title>
</head>
<body>
<input onkeydown="phoneNumberFormatter()" id="phone-number" />
<script src="home.js" type="text/javascript"></script>
</body>
</html>
我如何解决用户输入不正确类型的输入（例如字母）的问题，因为它不会被处理并显示在输入上，而是忽略它直到输入数字。
改用
'input'document.getElementById('phone-number').addEventListener('input', phoneNumberFormatter);
请注意，您必须调整在
formatPhoneNumber您需要将一个 keydown
event例如，在您的
html<input onkeydown="phoneNumberFormatter(this, event)" id="phone-number" />
然后在你的
jsfunction formatPhoneNumber(value, event) {
if (event.key < '0' || event.key > '9') {
event.preventDefault();
return value;
}
if (!value) return value;
const phoneNumber = value.replace(/[^\d]/g, '');
const phoneNumberLength = phoneNumber.length;
if (phoneNumberLength < 4) return phoneNumber;
if (phoneNumberLength < 7) {
return `(${phoneNumber.slice(0, 3)}) ${phoneNumber.slice(3)}`;
}
return `(${phoneNumber.slice(0, 3)}) ${phoneNumber.slice(
3,
6
)}-${phoneNumber.slice(6, 9)}`;
}
function phoneNumberFormatter(inputField, event) {
const formattedInputValue = formatPhoneNumber(inputField.value, event);
inputField.value = formattedInputValue;
}
这种方法将允许您阻止传入的 keydown
eventinput如果有帮助，请告诉我。