Javascript双击文本转换为文本框

Question

双击编辑文本的 javascipt 代码是什么。这个过程是我有一个文本，如果我双击它，会出现一个文本框，如果我按下回车，单词会根据你输入的内容而改变。

样本

这是示例文本。 $nbsp;$nbsp; --> 如果我双击它会出现一个文本框。

很抱歉问这个问题。我是 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;