Javascript雙擊文本轉換成文本框

Question

什麼是雙擊編輯文本的javascipt代碼。該過程是我有一個文本，如果我雙擊它，將出現一個文本框，如果我按下輸入該單詞將改變取決於你的類型。

樣品

 
This is sample text. $nbsp;$nbsp; --> if I double click it a textbox will appear.
 
<input type="text" value="This is sample text." name="" /> 

對不起，問這個。我是javascript中的新手

Answer 1

這是great example。

我會使其在鏈接消失的情況下保存在從例子腳本粘貼，但你應該按照鏈接 - 文章確實通過線打破了腳本下線的非常出色，解釋它的功能。一個偉大的學習機會的JavaScript。

var editing = false; 

if (document.getElementById && document.createElement) { 
    var butt = document.createElement('BUTTON'); 
    var buttext = document.createTextNode('Ready!'); 
    butt.appendChild(buttext); 
    butt.onclick = saveEdit; 
} 

function catchIt(e) { 
    if (editing) return; 
    if (!document.getElementById || !document.createElement) return; 
    if (!e) var obj = window.event.srcElement; 
    else var obj = e.target; 
    while (obj.nodeType != 1) { 
     obj = obj.parentNode; 
    } 
    if (obj.tagName == 'TEXTAREA' || obj.tagName == 'A') return; 
    while (obj.nodeName != 'P' && obj.nodeName != 'HTML') { 
     obj = obj.parentNode; 
    } 
    if (obj.nodeName == 'HTML') return; 
    var x = obj.innerHTML; 
    var y = document.createElement('TEXTAREA'); 
    var z = obj.parentNode; 
    z.insertBefore(y,obj); 
    z.insertBefore(butt,obj); 
    z.removeChild(obj); 
    y.value = x; 
    y.focus(); 
    editing = true; 
} 

function saveEdit() { 
    var area = document.getElementsByTagName('TEXTAREA')[0]; 
    var y = document.createElement('P'); 
    var z = area.parentNode; 
    y.innerHTML = area.value; 
    z.insertBefore(y,area); 
    z.removeChild(area); 
    z.removeChild(document.getElementsByTagName('button')[0]); 
    editing = false; 
} 

document.onclick = catchIt;