提问人：killershot707 提问时间：10/25/2023 最后编辑：Heretic Monkeykillershot707 更新时间：10/25/2023 访问量：36
JavaScript 如何在同一页面上格式化（电话号码）两个元素？[复制]
How can JavaScript format (Phone Numbers) two elements on the same page? [duplicate]
问：
我下面有这个脚本，可以按 ID 自动格式化元素。这在单一元素上效果很好，但我的网站上有两个表单，一个在顶部英雄部分，一个在底部，当我将其更改为 getElementsByClassName 时，我似乎无法让脚本运行。脚本如下
这是我通过下面的 Id 获取元素的脚本
<script>
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;
}
</script>
我也尝试过使用getElementsByClassName，但没有用。有人有想法吗？
答：
0赞
Nick Friesen
10/25/2023
#1
正如 @CherryDT 留下的评论中所述，使用 querySelectorAll 将帮助您获取具有“电话号码”类的所有输入，并通过使用 for 循环运行输入列表来正确格式化每个输入值。
请参阅以下示例：
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 inputFields = document.querySelectorAll('.phone-number');
inputFields.forEach(function(inputField) {
const formattedInputValue = formatPhoneNumber(inputField.value);
inputField.value = formattedInputValue;
});
}
phoneNumberFormatter();<input id="phone-number" value="1234567890"></input>
<input class="phone-number" value="0987654321"></input>
<input class="phone-number" value="1111111111"></input>
评论
for (const inputField of document.getElementsByClassName('phone-number')) { inputField.value = formatPhoneNumber(inputField.value) }假设你使这些元素具有 .class="phone-number"