摘要:點兩下修改文字
首先，思考是：
雙點table(也就是顯示文字的部份)，
接著輸入框顯示，輸入完內容後按下enter，則輸入框隱藏，而原本table的字改變成跟輸入框的一樣。
然後將tabel與輸入框的位置差不多～
以下是程式碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html"; charset="utf-8">
<title></title>
</head>
<script type="text/javascript">
function CanModify()
{
document.getElementById('input').style.display='block';
document.getElementById('input').select();
}
function DisModify()
{
if (event.keyCode == 13)
{
document.getElementById('input').style.display='none';
var contents=document.getElementById('input').value;
document.getElementById('content').innerHTML = contents;
}
}
</script>
<body bgcolor="#FFCC99">
<table style="z-index: 2; border: 1px; background-color: #aaeeaa; width: 155px;" ondblclick="CanModify()">
<tr>
<td><div id="content">123</div>
</td>
</tr>
</table>
<input type="text" id="input" name="test" value="123" style="display:none; height:20px; z-index: 1; position: absolute; top: 7px;" onKeyDown="DisModify()" onKeyPress="DisModify()">
</body>
</html>
此程式以IE瀏覽器為主，若要適用火狐或crome，可能要去查語法相容性（因為火狐好像不適用→都是onkeypress還是onpeydown的關 係！！！就是因為這樣我才用兩個，其實用一個就可以了。我記得還有另一個是火狐才看得懂的 但是因為工作只要求IE就算了）
因為文字的大小table和輸入框的不太一樣，可以再思考font-size。
還有位置要小心有些人螢幕大小不同（像SV的螢幕就是大螢幕不是4比3），
所以要用絕對位置（但因為每個螢幕可能不同，顯示的位置也可能....要測才知道）。
感覺是很簡單的東西，可是上網都沒查到，可能是太簡單所以沒人需要，也可能我搜尋文字打錯......
實際作用可以這樣：
table中的文字是從資料庫撈出來的，
使用者點兩下文字做修改，接著按下enter後送出資料到資料庫做修改（update）。
因此這個程式碼我放在php裡，因為接下來的確認送出就跟一般使用form沒什麼差別了～
換湯不換藥，總之秘技就是隱藏與顯示，因此下拉式選單、按鈕等等都可以照做。
還有很簡單的就是按下enter等於按下submit，然後將submit的按鈕隱藏，
這樣就可以用比較習慣的方式來呼叫php的function了
（因為我通常都是用form來使用php的function，先用php監聽是按了哪個submit，當然，也可以用javascript做出submit，因為我程式思考比較憨慢，就用比較笨的方法了）
111.240.154.234/yokunandu/testPHP/testInput.php
點入可以查看效果（但只適用ie瀏覽器）
追加：
我後來加入了onblur功能，這樣火狐就可以用失焦來實現（而且實際inline操作也確實要如此）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html"; charset="utf-8">
<title></title>
</head>
<script type="text/javascript">
function CanModify()
{
document.getElementById('input').style.display='block';
document.getElementById('input').select();
}
function DisModify()
{
if (event.keyCode == 13)
{
document.getElementById('input').style.display='none';
var contents=document.getElementById('input').value;
document.getElementById('content').innerHTML = contents;
}
}
function DisModify2()
{
document.getElementById('input').style.display='none';
var contents=document.getElementById('input').value;
document.getElementById('content').innerHTML = contents;
}
</script>
<body bgcolor="#FFCC99">
<table style="z-index: 2; border: 1px; background-color: #aaeeaa; width: 150px;" ondblclick="CanModify()">
<tr>
<td><div id="content">123</div>
</td>
</tr>
</table>
<input type="text" id="input" name="test" value="123" style="display:none; height:20px; z-index: 1; position: absolute; top: 7px;" onKeyPress="DisModify()" onblur="DisModify2()">
</body>
</html>
後記：
為什麼要用這麼費工夫的東西呢？
用JQUERY或者JGRID不是就有很好的inline操作欄位嗎？
答案就是因為IE這個怪獸，
之前想說排版漂亮就用jquery，用ie開啟網頁整個傻眼！
於是只好自力救濟用這種笨方法了～
雖然還要自己找位置，
但是為了ie，我目前就是先用這個方法囉～
第一次發這種文章（雖然也稱不上技術文），
有些小缺點而改了多次～
希望以後能多多成為發表者而不是googler!!!
再追加：將focus()改成select()!
再修改：只要將event帶入事件處理就可以解決瀏覽器相容問題了！
以下是final程式碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html"; charset="utf-8">
<title></title>
</head>
<script type="text/javascript">
function CanModify()
{
document.getElementById('input').style.display='block';
document.getElementById('input').select();
}
function DisModify(e)
{
if (e.keyCode == 13)
{
document.getElementById('input').style.display='none';
var contents=document.getElementById('input').value;
document.getElementById('content').innerHTML = contents;
}
}
function DisModify2()
{
document.getElementById('input').style.display='none';
var contents=document.getElementById('input').value;
document.getElementById('content').innerHTML = contents;
}
</script>
<body bgcolor="#FFCC99">
<table style="z-index: 2; border: 1px; background-color: #aaeeaa; width: 150px;" ondblclick="CanModify()">
<tr>
<td><div id="content">123</div>
</td>
</tr>
</table>
<input type="text" id="input" name="test" value="123" style="display:none; height:20px; z-index: 1; position: absolute; top: 7px;" onKeyPress="DisModify(event)" onblur="DisModify2()">
</body>
</html>
現在，你可以隨心所欲的測試看看囉(因為是全螢幕才對到位置，或視窗是縮小可能位置不會對好)：
111.240.154.234/yokunandu/testPHP/testInput.php
因為是用位置遮掩，因此每個元件都要對位置......這是很大的缺點Orz
2013.01.17:
然後把看起來比較實用的範例給大家（不然可能實在看不出有什麼用處）：
111.240.154.234/yokunandu/testPHP/testUI.php
之後就可以開始加入php撈資料庫加上按下Enter與輸入完畢後送出資料囉～
結果我又要新增了XDD
這太有趣了，我的第一篇可以被我一而再的改~
為什麼呢，
原來我才發現，我們可愛的新版MySQL的php的inline也是類似的用法！
那SV真是無師自通呀~(吹牛!)
不過它還有個讓人移動輸入框的功能，是說這有什麼好處呢？
讓使用者回顧看他原本填入的資料嗎?(因為我的不能移動，但其實就壓在下面)
然後為什麼用淺綠色呢？
本來討論UI時，用淺綠色是為了方便說明(因為到時候還要翻譯成日文)。
後來這樣的設定反而成了不錯的規則。
因為SV是用白色、淺綠色與淺藍色來劃分table的功能。
白色是只能看的，淺綠色則是點兩下就可修改(用點兩下是怕點一次會嚇到人，所以確定要修改就要點兩下)，淺藍色則是可以當超連結。
(不然藍線藍色的超連結實在不是很可愛呀，只好把這樣的設定重設了)
最後SV還是決定用Dreamweaver大神來排版，
因為排位置部分隨著不同電腦不同瀏覽器都會跑掉
不過換湯不換藥，只要了解這樣的原理→隱藏、覆蓋、顯現，用z-index來疊在上面，
就可以製造出inline修改的假象了~
其實SV是有看過別人用這樣的手法在C#做inline效果，
(C#果然是SV的好朋友呀!!!)
才會想到網頁也可以依樣畫葫蘆~
當然，如果有別人現成做好的能用，是最好的！
難過IE與其他瀏覽器的相容問題Orz
好了，分享到這！應該是最後修改了吧XDDDD?