จัดรูปแบบช่องป้อนข้อมูลโดยอัตโนมัติด้วย Cleave.js

คิดถึงฟิลด์อินพุตที่ต่างกันทั้งหมดที่ ต้องการโครงสร้างที่จัดรูปแบบ. หมายเลขโทรศัพท์บัตรเครดิตวันเกิดที่อยู่ ... พวกเขาทั้งหมดมี รูปแบบที่เป็นเอกลักษณ์ของตัวเอง.

ง่ายพอที่จะปล่อยให้ฟิลด์เหล่านี้อยู่ตามลำพังและไว้วางใจผู้ใช้ แต่มันอาจจะดีกว่าที่จะใช้ Cleave.js, ฟรีปลั๊กอิน JavaScript วานิลลา ช่วยคุณ จัดรูปแบบฟิลด์อินพุตโดยอัตโนมัติ.

HTML5 มาพร้อมกับมัน ชุดของอินพุตที่เกี่ยวข้องกับรูปแบบข้อมูล เช่นหมายเลขโทรศัพท์ ด้วย Cleave คุณสามารถนำสิ่งนี้ไปสู่อีกระดับด้วย อินพุตที่กำหนดเอง ที่ จัดรูปแบบข้อความโดยอัตโนมัติ ตามที่พิมพ์.

ตามค่าเริ่มต้นปลั๊กอินสนับสนุน รูปแบบข้อความพื้นฐานห้าแบบ:

1. หมายเลขบัตรเครดิต
2. เบอร์โทรศัพท์
3. วันที่
4. รูปแบบตัวเลข (พร้อมเครื่องหมายจุลภาค)
5. ฟิลด์อินพุตที่กำหนดเอง

ตัวเลือกสุดท้ายนั้นคือสิ่งที่ยอดเยี่ยมเพราะคุณสามารถสร้างของคุณได้ รูปแบบข้อมูลที่กำหนดเองของตัวเองตั้งแต่เริ่มต้น. Cleave ไม่ได้บังคับให้คุณทำตามวิธีการที่เข้มงวด.

แต่มันให้เครื่องมือแก่คุณ สร้างอินพุตของคุณเอง กับ การสนับสนุนเพิ่มเติมสำหรับส่วนประกอบ React และ Angular. นอกจากนี้ยังรองรับ เบราว์เซอร์ที่สำคัญทั้งหมด และควรจับคู่การสนับสนุนสำหรับ เบราว์เซอร์รุ่นเก่า พร้อมด้วย jQuery.

โปรดทราบว่านี่ไม่ใช่ปลั๊กอินที่เหนียวสำหรับการตั้งค่า คุณ กำหนดเป้าหมาย ID หรือคลาสที่คุณมี ในช่องป้อนข้อมูลของคุณและ ส่งผ่านไปยังอินสแตนซ์ Cleave ใหม่. นี่เป็นตัวอย่างข้อมูล:

 var cleave = new Cleave ('. input-phone', phone: true, phoneRegionCode: 'country'); 

อย่างไรก็ตามในขณะที่ Cleave อาจตั้งค่าได้ง่าย คุณสมบัติที่กำหนดเองมากมาย คุณสามารถเล่นกับ.

เอกสารทั้งหมดเป็น โฮสต์ภายใน repo, ดังนั้นคุณจะต้องเรียกดูหน้า GitHub ค้นหาวิธีการและตัวเลือกที่แตกต่างกันทั้งหมด. โดยเฉพาะอย่างยิ่ง หน้าตัวเลือก มีหลายอย่างที่ต้องผ่านและอาจใช้เวลาสักครู่เพื่อค้นหาสิ่งที่คุณต้องการ.

โชคดีที่ Cleave มี ตัวอย่างสดมากมาย คุณสามารถศึกษาและทำซ้ำได้ ตัวอย่างเหล่านี้ยัง ฟรีดาวน์โหลด จาก repo GitHub ถ้าคุณต้องการที่จะเห็น ตัวอย่างสดเพิ่มเติม เยี่ยมชม หน้าแรกของ Cleave.js หรือตรวจสอบ ซอนี้ เต็มไปด้วยการสาธิต.