คุณสมบัติ isContentEditable ใน HTML DOM

คุณสมบัติ isContentEditable ใช้ตรวจสอบว่าเนื้อหาของอีลีเมนต์สามารถแก้ไขได้หรือไม่ (คืนค่า true/false)

ไวยากรณ์ (Syntax)

HTMLElementObject.isContentEditable

ค่า Boolean ที่คืนกลับ

ตัวอย่างการใช้งาน

ตัวอย่างด้านล่างใช้ isContentEditable เพื่อควบคุมการปิดใช้งานช่องกรอกหลังส่งข้อมูล:

<!DOCTYPE html>
<html>
<head>
<title>isContentEditable</title>
<style>
  form { width: 70%; margin: 0 auto; text-align: center; }
  * { padding: 2px; margin: 5px; }
  input[type="button"] { border-radius: 10px; }
</style>
</head>
<body>
<form>
  <fieldset>
    <legend>isContentEditable</legend>
    <label for="textSelect">Full Name: <input type="text" id="textSelect" contentEditable="true" placeholder="John Doe"> </label><br>
    <label for="emailSelect">Email: <input type="email" id="emailSelect" placeholder="John@example.com"> </label>
    <input type="button" onclick="confirmtext()" value="Submit">
    <div id="divDisplay"></div>
  </fieldset>
</form>
<script>
  var divDisplay = document.getElementById("divDisplay");
  var inputText = document.getElementById("textSelect");
  var inputEmail = document.getElementById("emailSelect");
  divDisplay.textContent = 'NOTE: Email will be not editable once submitted';
  
  function confirmtext() {
    inputEmail.disabled = !inputEmail.isContentEditable;
    inputText.disabled = !inputText.isContentEditable;
    divDisplay.textContent = 'Details Submitted';
  }
</script>
</body>
</html>

ผลลัพธ์

ก่อนคลิกปุ่ม "Submit": ช่อง Full Name แก้ไขได้ (contentEditable="true"), ช่อง Email แก้ไขไม่ได้ (ปกติ)

หลังคลิกปุ่ม "Submit": ทั้งสองช่องถูก disabled, แสดง "Details Submitted"

หมายเหตุ: รูปภาพตัวอย่างจากต้นฉบับไม่ได้รวมอยู่ในเนื้อหานี้