สำหรับการทำให้ตัวเลขในช่องกรอก (Input) แสดงคอมม่าและทศนิยม 2 ตำแหน่งแบบอัตโนมัติในขณะที่พิมพ์หรือหลังจากพิมพ์เสร็จนั้น มีจุดที่ต้องแก้ไขและเพิ่มเติมในส่วนของ JavaScript ดังนี้ครับ

สาเหตุที่ตอนนี้ไม่มีคอมม่า เพราะคุณใช้ <input type="number"> ซึ่งเบราว์เซอร์จะไม่อนุญาตให้มีเครื่องหมายคอมม่าค้างอยู่ในช่องกรอก (จะรับได้เฉพาะตัวเลขและจุดทศนิยมเท่านั้น)

จุดที่ 1: แก้ไข HTML ในฟังก์ชัน addRow

ให้เปลี่ยน type="number" เป็น type="text" เพื่อให้รองรับการแสดงผลเครื่องหมายคอมม่า และเพิ่ม onblur เพื่อให้จัดฟอร์แมตเมื่อพิมพ์เสร็จครับ

ในฟังก์ชัน addRow() ส่วนของ else (แบบปกติ):

JavaScript

// ของเดิม
<input type="number" step="0.01" class="table-input amount" value="0.00" oninput="calculate()" style="text-align:right; font-weight:bold;">

// แก้เป็น
<input type="text" class="table-input amount" value="0.00" 
       oninput="calculate()" 
       onblur="this.value = formatNumber(this.value)" 
       style="text-align:right; font-weight:bold;">

จุดที่ 2: เพิ่มฟังก์ชัน formatNumber

ก๊อปปี้ฟังก์ชันนี้ไปวางไว้ก่อนหรือหลังฟังก์ชัน calculate() ก็ได้ครับ เพื่อใช้สำหรับแปลงตัวเลขให้มีคอมม่า

JavaScript

function formatNumber(val) {
    let n = parseFloat(val.replace(/,/g, ''));
    if (isNaN(n)) return "0.00";
    return n.toLocaleString('th-TH', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}

จุดที่ 3: แก้ไขฟังก์ชัน calculate()

เนื่องจากเราเปลี่ยน input เป็นแบบ text และมีคอมม่า เราจึงต้องลบคอมม่าออกก่อนนำไปคำนวณครับ

ในฟังก์ชัน calculate() ส่วนของ else (แบบปกติ):

JavaScript

// หาบรรทัดนี้ในส่วน else
document.querySelectorAll('.amount').forEach(input => {
    // แก้ไขบรรทัดล่างนี้
    let val = input.value.replace(/,/g, ''); // ลบคอมม่าออกก่อน parse
    total += parseFloat(val) || 0;
});

จุดที่ 4: (แนะนำเพิ่มเติม) การจัดการตอน Focus

เพื่อให้ผู้ใช้งานแก้ไขตัวเลขได้ง่ายขึ้น (ไม่มีคอมม่ามากวนตอนกำลังพิมพ์) ควรเพิ่ม onfocus เข้าไปด้วยในจุดที่ 1 ครับ:

JavaScript

// เพิ่ม onfocus เพื่อลบคอมม่าออกเวลาจะแก้ไขตัวเลข
onfocus="this.value = this.value.replace(/,/g, '')"

สรุปสั้นๆ สำหรับจุด “แบบละเอียด” (Full Mode)

หากคุณต้องการให้ Full Mode มีคอมม่าด้วย ให้ใช้หลักการเดียวกันคือ:

1. เปลี่ยน type="number" เป็น text ใน addRow
2. ใช้ .replace(/,/g, '') ก่อน parseFloat ในฟังก์ชัน calcRow
3. ใส่ onblur="this.value = formatNumber(this.value)" ในทุกช่องที่ต้องการให้มีคอมม่า

วิธีนี้จะทำให้หน้าตา UI ของระบบประกันภัยดูเป็นมืออาชีพขึ้นมากครับ เหมือนกับระบบบัญชีมาตรฐานเลยครับ