home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

เมธอด execCommand() ใน HTML DOM

เมธอด execCommand() ใน HTML DOM ใช้สำหรับสั่งให้ทำคำสั่งที่ระบุบนส่วนที่แก้ไขได้ (editable section) ซึ่งผู้ใช้เลือกไว้ ต้องตั้งค่า document.designMode ให้เป็น "on" ก่อนเพื่อให้มีพื้นที่แก้ไขได้

ไวยากรณ์ (Syntax)

document.execCommand(command, showUI, value)
  • command: ชื่อคำสั่งที่ต้องการรัน
  • showUI: Boolean ระบุว่าควรแสดง UI หรือไม่
  • value: ค่าสำหรับคำสั่งบางอย่างที่ต้องการค่าเพิ่มเติม เช่น fontSize, foreColor

คำสั่งที่รองรับ (บางส่วน)

"backColor", "bold", "createLink", "copy", "cut", "defaultParagraphSeparator",
"delete", "fontName", "fontSize", "foreColor", "formatBlock", "forwardDelete",
"insertHorizontalRule", "insertHTML", "insertImage", "insertLineBreak",
"insertOrderedList", "insertParagraph", "insertText", "insertUnorderedList",
"justifyCenter", "justifyFull", "justifyLeft", "justifyRight", "outdent",
"paste", "redo", "selectAll", "strikethrough", "styleWithCss", "superscript",
"undo", "unlink", "useCSS"

ตัวอย่าง

ตัวอย่างการเปลี่ยนขนาดตัวอักษร สีพื้นหลัง และสีตัวอักษรเมื่อดับเบิลคลิกข้อความ:

<!DOCTYPE html>
<html>
<body ondblclick="changeText()">
<h1>ตัวอย่าง execCommand()</h1>
<h3>ดับเบิลคลิกที่ข้อความใดๆ เพื่อเปลี่ยนขนาดและสี</h3>
<p>Here is some text for being clicked upon. Some sample text is here too</p>
<script>
  document.designMode = "on";
  
  function changeText() {
    document.execCommand("fontSize", true, "20px");
    document.execCommand("backColor", true, "lightgreen");
    document.execCommand("foreColor", true, "blue");
  }
</script>
</body>
</html>

ผลลัพธ์

เมื่อโหลดหน้าเว็บ ทุกข้อความจะแก้ไขได้ (designMode on)

เมื่อดับเบิลคลิกที่ข้อความใดๆ ข้อความส่วนนั้นจะเปลี่ยนเป็นขนาด 20px พื้นหลังสีเขียวอ่อน ตัวอักษรสีน้ำเงิน

คำอธิบายโค้ด

  • ตั้งค่า document.designMode = "on" ทำให้ทั้งหน้าแก้ไขได้
  • ตั้งค่า ondblclick="changeText()" บน <body> เรียกฟังก์ชันเมื่อดับเบิลคลิก
  • changeText() เรียก execCommand() 3 ครั้ง:
    • fontSize ตั้งขนาด 20px
    • backColor ตั้งสีพื้นหลัง lightgreen
    • foreColor ตั้งสีตัวอักษร blue
  • คำสั่งจะใช้กับส่วนที่ผู้ใช้เลือก (highlight) หรือตำแหน่งเคอร์เซอร์
หมายเหตุ: execCommand() ถูก deprecated (เลิกสนับสนุน) ในมาตรฐานใหม่ ควรใช้ ContentEditable และ Input Events แทนสำหรับโปรเจกต์ใหม่