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;

Javascript双击文本转换为文本框

1 个答案: