Number Elements (อิลิเมนต์ตัวเลข)

เอกสารสำหรับ NumberElementFactory และ CurrencyElementFactory - components สำหรับ numeric input พร้อม formatting, validation และ step controls

📋 สารบัญ

1. ภาพรวม
2. NumberElementFactory
3. CurrencyElementFactory
4. ตัวอย่าง Formatting
5. แนวทางปฏิบัติที่ดี

ภาพรวม

Number elements จัดการ numeric input พร้อม formatting, validation และ keyboard navigation อัตโนมัติ โดยรองรับทั้ง <input type="number"> และ <input type="currency">

คุณสมบัติหลัก

• ✅ Thousand Separators: จัดกลุ่มอัตโนมัติ (1,000,000)
• ✅ Decimal Precision: ควบคุมจำนวนทศนิยม
• ✅ Min/Max Validation: ตรวจสอบช่วงค่า
• ✅ Step Controls: ปุ่มลูกศรเพิ่ม/ลดค่า
• ✅ Keyboard Filtering: กรองเฉพาะตัวเลขที่ถูกต้อง

CurrencyElementFactory เปิดใช้ได้ทั้งผ่าน data-element="currency" และ <input type="currency"> โดยสามารถ override จำนวนทศนิยมด้วย data-precision หรือ data-decimals

NumberElementFactory

การใช้งานพื้นฐาน

<!-- Simple number input -->
<input type="number"
       data-element="number"
       name="quantity"
       min="0"
       max="100">

<!-- Number พร้อม formatting -->
<input type="text"
       data-element="number"
       data-precision="2"
       data-use-grouping="true"
       name="amount"
       placeholder="0.00">

HTML Attributes

Keyboard Navigation

ตัวอย่าง

จำนวนเต็มเท่านั้น

<input type="number"
       data-element="number"
       data-precision="0"
       name="quantity"
       min="1"
       max="999">

ทศนิยม 2 ตำแหน่ง

<input type="text"
       data-element="number"
       data-precision="2"
       data-pad-to-precision="true"
       name="price"
       placeholder="0.00">

ตัวเลขใหญ่พร้อม Grouping

<input type="text"
       data-element="number"
       data-precision="0"
       data-use-grouping="true"
       name="population">
<!-- ผู้ใช้เห็น: 1,000,000 แทน 1000000 -->

CurrencyElementFactory

CurrencyElementFactory ขยาย NumberElementFactory ด้วยค่าเริ่มต้นสำหรับสกุลเงิน: ทศนิยม 2 ตำแหน่ง, thousand separators และรองรับค่าลบ

การใช้งานพื้นฐาน

<input type="text"
       data-element="currency"
       name="price"
       placeholder="0.00">
<!-- จัดรูปแบบอัตโนมัติเป็น: 1,234.56 -->

<input type="currency"
       name="unit_cost"
       step="0.0001"
       data-decimals="4"
       placeholder="0.0000">
<!-- จัดรูปแบบอัตโนมัติเป็น: 1,234.5678 -->

Default Configuration

CurrencyElementFactory.config = {
       precision: 2,              // ค่าเริ่มต้นทศนิยม 2 ตำแหน่ง
       padToPrecision: true,      // เติมศูนย์ท้ายตาม precision
       roundValues: true,         // ปัดเศษตาม precision ที่ตั้งไว้
  showSymbol: false,         // ไม่แสดงสัญลักษณ์
  allowNegative: true,       // อนุญาตค่าลบ
  useGrouping: true,         // 1,000,000.00
  groupingSeparator: ',',
  decimalSeparator: '.'
};

ตัวอย่าง

สกุลเงินบาทไทย

<input type="text"
       data-element="currency"
       data-symbol="฿"
       data-symbol-position="before"
       name="price_thb">
<!-- แสดง: ฿1,234.50 -->

ต้นทุน inventory 4 ตำแหน่ง

<input type="currency"
       name="cost"
       step="0.0001"
       data-decimals="4">
<!-- กรอก 1234.5 → แสดง 1,234.5000 -->

ตัวอย่าง Formatting

Precision Examples

Grouping Examples

แนวทางปฏิบัติที่ดี

1. ✅ ใช้ Precision ที่เหมาะสม

<!-- ✅ ดี: จำนวนเต็มสำหรับ quantities -->
<input data-element="number" data-precision="0" name="quantity">

<!-- ✅ ดี: ทศนิยม 2 ตำแหน่งสำหรับ currency -->
<input data-element="currency" name="price">

2. ✅ กำหนด Min/Max สำหรับ Validation

<!-- ✅ ดี: ป้องกันช่วงค่าไม่ถูกต้อง -->
<input data-element="number"
       min="0"
       max="100"
       name="percentage">

3. ✅ ใช้ Currency สำหรับเงิน

<!-- ✅ ดี: Currency element สำหรับเงิน -->
<input data-element="currency" name="total">
<!-- อัตโนมัติ: ทศนิยม 2 ตำแหน่ง, grouping, รองรับค่าลบ -->

4. ✅ ใช้ Grouping สำหรับตัวเลขใหญ่

<!-- ✅ ดี: อ่านง่าย -->
<input data-element="number"
       data-use-grouping="true"
       name="population">
<!-- แสดง: 1,000,000 -->

เอกสารที่เกี่ยวข้อง

• Form Elements ภาพรวม
• ElementFactory - Base class
• Text Elements - Text inputs
• Select Elements - Dropdown inputs