การเปลี่ยน Span เป็น Input อย่างง่าย

เทคนิคการเปลี่ยนพื้นที่แสดงผลเช่น span หรือ div ให้เป็น Input เพื่อรองรับการแก้ไข อย่างง่าย
<!DOCTYPE html>
<html lang=th dir=ltr>
 <head>
  <meta charset=utf-8>
  <title>Test</title>
  <style>
  #user, #password {
   display: none; /* ซ่อนไว้ก่อน */
  }
  </style>

 </head>
<body>
<?php
 print_r($_POST);
?>
<form method=post action=?>
 <p>
  <label>User : <span id=sp_user>Demo</span><input type=text name=user id=user value="Demo"></label>
 </p>
 <p>
  <label>Password : <span id=sp_password>Test</span><input type=text name=password id=password value="Test"></label>
 </p>
  <p>
  <button>Submit order</button>
 </p>
</form>
<script>
 var doclick = function() {
  /* เมื่อคลิกที่พื้นที่แสดงผล ให้แสดง Input */
  var input = document.getElementById(this.id.replace('sp_', ''));
  /* อ่านค่าไปแสดงที่ Input */
  input.value = this.innerHTML;
  /* แสดง Input */
  input.style.display = 'inline';
  this.style.display = 'none';
  input.focus();
 };
 var doblur = function() {
  /* เมื่อเมาส์ออกจาก Input */
  var span = document.getElementById('sp_' + this.id);
  /* คืนค่าใน Input ไปยัง พื้นที่แสดงผล */
  span.innerHTML = this.value;
  /* เมื่อเมาส์ออกจาก Input ให้ซ่อน */
  this.style.display = 'none';
  span.style.display = 'inline';
 };
 /* เมื่อคลิกที่พื้นที่แสดงผล */
 document.getElementById('sp_user').onclick = doclick;
 document.getElementById('sp_password').onclick = doclick;
 /* เมื่อโฟกัสออกจาก Input */
 document.getElementById('user').onblur = doblur;
 document.getElementById('password').onblur = doblur;
</script>

</body>
</html>

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

จากตัวอย่างนี้ ให้สังเกตว่า ทั้ง Input และ พื้นที่แสดงผลต่างกันที่ Id ของพื้นที่แสดงผล มี sp_ นำหน้า เท่านั้นครับ ซึ่งข้อดีของการใช้เทคนิคนี้ก็คือ เราสามารถใช้ฟังก์ชั่นเดิมซ้ำๆกับหลายๆ Input ได้ครับ

ผู้เขียน goragod โพสต์เมื่อ 22 ธ.ค. 2554 เปิดดู 14,311 ป้ายกำกับ HTMLJavascript
^