我在HTML中创建了一个表单字段，我想将电话号码输入自动格式化为(123)456-7890。
我的HTML代码是这样的:
<form>
<div class="sc-formfield-input">
<div class="input-group">
<input type="text" id="Phone" name="Phone" data-field-type="Phone" placeholder="Phone" ><i class="fa-solid fa-phone"></i></div>
</div>
</form>
我如何编写JavaScript以我想要的方式格式化电话号码?
使用这个答案的函数，您可以通过将此附加在script标记中来实现您想要的功能:
document.getElementById('Phone').addEventListener('focusout', function() {
event.target.value = formatPhoneNumber(event.target.value);
});
您也可以使用change事件代替focusout作为IT goldman建议。
您可以使用下面的代码作为参考，并在数字输入后立即更改值。
function RecordChange() {
let number = document.getElementById("phone_number_field").value;
//console.log(number);
if(number.length > 10) {
document.getElementById("Show_Warning").innerHTML = "invalid phone number"
document.getElementById("phone_number_field").style.borderColor = 'red';
}
else {
document.getElementById("Show_Warning").innerHTML = ""
document.getElementById("phone_number_field").style.borderColor = 'black';
}
if(
number.length === 10
) {
let targetvalue = "(" + number.slice(0, 3) + ")-" + number.slice(3, 7) + "-" + number.slice(7, 10)
console.log(targetvalue);
document.getElementById("phone_number_field").value = targetvalue;
}
}<html>
<title>Header</title>
<body>
<script src="script.js"></script>
Body Starts :
<div>
<p>Phone Number : </p>
<input type="text" id="phone_number_field" oninput="RecordChange()">
<p id = "Show_Warning"></p>
</div>
</body>
</html>这只是一个虚拟代码，但是你可以根据需要使用这个函数来改变数字格式。