Javascript双击文本转换为文本框

Question

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

样本

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

<input type="text" value="这是示例文本。" 名称="" />

抱歉问这个。我是 JavaScript 新手

Answer 1

这是一个很好的例子。

我将粘贴该示例中的脚本，以便在链接消失时保留它，但您应该点击链接——这篇文章在逐行分解脚本并解释它的作用方面做得很好. 一个很好的 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;