Javascript double click texte transformer en textbox

Question

Quel est le code javascipt qui permet d'éditer un texte en double-cliquant. Le processus est le suivant : j'ai un texte et si je double-clique dessus, une zone de texte apparaît, et si j'appuie sur la touche Entrée, le mot change en fonction de ce que vous avez tapé.

Echantillon

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

Désolé de demander ça. Je suis un débutant en javascript.

Answer 1

Voici un excellent exemple .

Je vais coller le script de cet exemple afin qu'il soit préservé au cas où ce lien disparaîtrait, mais vous devriez suivre le lien -- l'article fait un excellent travail en décomposant le script ligne par ligne et en expliquant ce qu'il fait. Une excellente opportunité d'apprentissage pour 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;