ตัวอย่าง JavaScript Prompt Dialog Box

Prompt Dialog Box คืออะไร?

prompt() เป็น dialog box ในตัวของเบราว์เซอร์ (Native) ที่ใช้รับข้อมูลจากผู้ใช้ ผ่านช่องกรอกข้อความ มีปุ่ม OK และ Cancel

• ผู้ใช้กด OK → คืนค่าข้อความที่พิมพ์ (string)
• ผู้ใช้กด Cancel หรือปิดหน้าต่าง → คืนค่า null
• ผู้ใช้ไม่พิมพ์อะไรกด OK → คืนค่า "" (empty string)

ตัวอย่างโค้ดพื้นฐาน

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>JavaScript Prompt</title>
  <style>
    body { font-family: 'Segoe UI', sans-serif; padding: 20px; max-width: 600px; margin: 0 auto; }
    .result { font-size: 18px; font-weight: 500; color: #6a1b9a; margin-top: 20px; min-height: 30px; }
    button { padding: 12px 24px; background: #7e32d4; color: white; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; }
    button:hover { background: #6a1b9a; }
  </style>
</head>
<body>
  <h1>JavaScript prompt() Method</h1>
  <div class="result" id="result"></div>
  <button id="promptBtn">คลิกเพื่อแสดง Prompt</button>
  <p>ลองกด OK, Cancel, หรือพิมพ์ข้อความแล้วกด OK</p>

  <script>
    const resultEle = document.getElementById('result');
    const btn = document.getElementById('promptBtn');
    
    btn.addEventListener('click', () => {
      const userInput = prompt('กรุณากรอกชื่อของคุณ:');
      
      if (userInput === null) {
        resultEle.textContent = 'คุณกด Cancel หรือปิดหน้าต่าง';
        resultEle.style.color = '#f44336';
      } else if (userInput.trim() === '') {
        resultEle.textContent = 'คุณกด OK แต่ไม่ได้พิมพ์อะไร (empty string)';
        resultEle.style.color = '#ff9800';
      } else {
        resultEle.textContent = `คุณพิมพ์: "${userInput}"`;
        resultEle.style.color = '#4CAF50';
      }
    });
  </script>
</body>
</html>

รูปแบบการใช้งาน

prompt(message, defaultValue);

• message (optional) - ข้อความแจ้งผู้ใช้
• defaultValue (optional) - ค่าเริ่มต้นในช่องกรอก

ตัวอย่างพร้อม Default Value

const name = prompt('ชื่อของคุณคือ?', 'สมชาย ใจดี'); // "สมชาย ใจดี" จะอยู่ในช่องกรอกแล้ว

ข้อจำกัดและข้อควรระวัง

ตัวเลือกทันสมัยแทน prompt()

1. Custom Modal (แนะนำ)

<div class="custom-prompt" role="dialog" aria-modal="true" aria-labelledby="prompt-title">
  <h2 id="prompt-title">กรุณากรอกชื่อ</h2>
  <input type="text" id="custom-input" autofocus />
  <div class="actions">
    <button id="custom-ok">ตกลง</button>
    <button id="custom-cancel">ยกเลิก</button>
  </div>
</div>

2. HTML Dialog Element (Native, Modern)

<dialog id="myDialog">
  <form method="dialog">
    <label>ชื่อ: <input name="name" autofocus></label>
    <menu>
      <button value="cancel">ยกเลิก</button>
      <button id="confirmBtn" value="ok">ตกลง</button>
    </menu>
  </form>
</dialog>

<script>
  const dialog = document.getElementById('myDialog');
  dialog.showModal(); // แสดง modal
  dialog.addEventListener('close', () => {
    console.log('Return value:', dialog.returnValue); // "ok" หรือ "cancel"
    console.log('Input value:', dialog.querySelector('input').value);
  });
</script>

ข้อดี: Native, รองรับ ESC key, backdrop, focus trap, form submission แบบ built-in

3. Library: SweetAlert2, Swal, Bootbox

Swal.fire({
  title: 'กรุณากรอกชื่อ',
  input: 'text',
  inputPlaceholder: 'ชื่อของคุณ'
}).then((result) => {
  if (result.isConfirmed) console.log(result.value);
});

สรุป

• prompt() ใช้ได้สำหรับ prototype, demo, หรือ internal tools
• Production app ควรใช้ Custom Modal หรือ <dialog> element
• ต้อง handle case null (Cancel) และ empty string เสมอ