การเปลี่ยน Span เป็น Input อย่างง่าย
เทคนิคการเปลี่ยนพื้นที่แสดงผลเช่น span หรือ div ให้เป็น Input เพื่อรองรับการแก้ไข อย่างง่าย
โค้ดด้านบนก็ไม่มีอะไรซับซ้อนเลยครับ หลักการก็คือ สร้าง Input ที่ต้องใช้ในการ Submit รอไว้ ตามจำนวนและตำแหน่งของพื้นที่ต้องการแก้ไข โดยที่ในตอนแรกเราจะทำการซ่อน Input ไว้ก่อน เมื่อมีการคลิกที่พื้นที่ที่ต้องการแก้ไข ก็ให้แสดง Input ออกมา และเมื่อเอาเมาส์ออกจาก Input ก็ให้ซ่อนกลับตามเดิม
จากตัวอย่างนี้ ให้สังเกตว่า ทั้ง Input และ พื้นที่แสดงผลต่างกันที่ Id ของพื้นที่แสดงผล มี sp_ นำหน้า เท่านั้นครับ ซึ่งข้อดีของการใช้เทคนิคนี้ก็คือ เราสามารถใช้ฟังก์ชั่นเดิมซ้ำๆกับหลายๆ 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 ได้ครับ