💻พัฒนาเว็บเพจ ตอนที่ 25 - JS Format Phone Number Auto

Channel:

Ikapayabaht

Subscribers:

336

Published on November 29, 2021 3:56:22 PM ● Video Link: https://www.youtube.com/watch?v=OuUn-uQEJ3M

Duration: 9:07

14 views

1

#Zentref #IkaPayabaht #html5 #css #javascript
คำสั่งที่ใช้ในคลิปนี้
//เรียกใช้งานตัว input ประเภท text อ้างอิงจาก id ของ input
var telEl = document.querySelector('#phoneNum');
หรือ var telEl = document.getElementById("phoneNum");
telEl.addEventListener('keyup', (e) =› {
var val = e.target.value;
e.target.value = val
.replace(/\D/g, '')
// เซ็ตรูปแบบเบอร์โทร xxx-xxx-xxxx
.replace(/(\d{1,3})(\d{1,3})?(\d{1,4})?/g, function(txt, f, s, t) {
// ส่วนแสดงค่าใน input
if (t) {
return `${f}-${s}-${t}`
} else if (s) {
return `${f}-${s}`
} else if (f) {
return `${f}`
}
});
});
*หมายเหตุ คำสั่ง input ควรกำหนด maxlength ด้วย