简介

相当简单，是的。我可以想到两种基本方法：

使用contenteditable属性
使用input即时添加

以下两个方便的参考文献：

使用`contenteditable`属性

contentEditable属性（W3C，MDC，MSDN）可以为“true”，表示可以直接编辑该元素。这样做的好处是根本不需要任何JavaScript（live example）：

<p id="container">The <span contenteditable="true">colored items</span> in this paragraph
are <span contenteditable="true">editable</span>.</p>

为了避免你认为这是一些新东西，IE自IE 5.5和其他主流浏览器支持它已经差不多长了。（事实上，这是IE5.5 / IE6时间框架中许多微软创新之一;它们也给了我们innerHTML和Ajax。）

如果您想抓取（已修改的）内容，只需从您可编辑的元素中抓取innerHTML即可。以下是contenteditable跨越blur（live copy）时会标记的一些JavaScript示例：

var spans = document.getElementsByTagName("span"),
    index,
    span;

for (index = 0; index < spans.length; ++index) {
    span = spans[index];
    if (span.contentEditable) {
        span.onblur = function() {
            var text = this.innerHTML;
            text = text.replace(/&/g, "&amp").replace(/</g, "&lt;");
            console.log("Content committed, span " +
                    (this.id || "anonymous") +
                    ": '" +
                    text + "'");
        };
    }
}

#container span {
    background-color: #ff6;
}

<p id="container">The <span id="span1" contenteditable="true">colored items</span> in this paragraph 
    are <span contenteditable="true">editable</span>.</p>

使用`input`即时添加

您需要获取对您用于显示的元素的引用（可能是span），然后挂钩其click事件（或挂钩click事件所需元素的父级）。在click事件中，隐藏span并在其旁边插入input[type=text]。

以下是使用input的非常简单的示例：

window.onload = function() {
    document.getElementById('container').onclick = function(event) {
        var span, input, text;

        // Get the event (handle MS difference)
        event = event || window.event;

        // Get the root element of the event (handle MS difference)
        span = event.target || event.srcElement;

        // If it's a span...
        if (span && span.tagName.toUpperCase() === "SPAN") {
            // Hide it
            span.style.display = "none";

            // Get its text
            text = span.innerHTML;

            // Create an input
            input = document.createElement("input");
            input.type = "text";
            input.value = text;
            input.size = Math.max(text.length / 4 * 3, 4);
            span.parentNode.insertBefore(input, span);

            // Focus it, hook blur to undo
            input.focus();
            input.onblur = function() {
                // Remove the input
                span.parentNode.removeChild(input);

                // Update the span
                span.innerHTML = input.value == "" ? "&nbsp;" : input.value;

                // Show the span again
                span.style.display = "";
            };
        }
    };
};

#container span {
    background-color: #ff6;
}

<p id="container">The <span>colored items</span> in this paragraph
    are <span>editable</span>.</p>

我在click元素上挂钩p，而不是单个跨度，因为我想拥有多个，并且更容易做到这一点。（它被称为“事件委托”。）您可以在答案开头的参考资料中找到上面使用的各种函数。

在这种情况下，我使用blur再次进行编辑，但您可能希望有一个OK按钮和/或其他触发器（如Enter键）。

偏离主题：您可能已经注意到上面的JavaScript代码中我必须处理一些“MS差异”（例如，IE与其他浏览器不同的东西），而我已经使用旧的“DOM0”风格的事件处理程序，你只需要为一个属性分配一个函数，这是不理想的，但它避免了我必须处理另一个的差异，其中一些版本的IE没有DOM2 addEventListener，所以你必须回到attachEvent。

我的观点是：您可以使用像jQuery，Prototype，YUI，{{Closure这样不错的JavaScript库来平滑浏览器差异并获得大量实用功能。 3}}，或any of several others。你没有说你正在使用任何库，所以我没有在上面，但有令人信服的理由使用它们，所以你不必担心所有的小浏览器的琐事，并可以继续解决你的问题实际的业务需求。

Answer 2

使用纯JavaScript的一个简单示例将是：http://jsfiddle.net/vzxW4/。

document.getElementById('test').onclick = function() {
    document.body.removeChild(this);
    var input = document.createElement('input');
    input.id = 'test';
    input.value = this.innerHTML;
    document.body.appendChild(input);
    input.select();
}

使用库可以节省您的时间和头痛。例如，使用jQuery：http://jsfiddle.net/vzxW4/1/。

$("#test").click(function() {
    var input = $("<input>", { val: $(this).text(),
                               type: "text" });
    $(this).replaceWith(input);
    input.select();
});

Answer 3

我们能做到这么简单吗？

保持文本框的readonly属性为true，一些CSS使文本框看起来像带有边框的跨度。

然后，只要用户点击文本框，就会删除readonly属性。

On blur恢复CSS和只读属性。

单击时使用javascript将某些文本更改为输入字段

3 个答案:

简介

使用`contenteditable`属性

使用`input`即时添加

单击时使用javascript将某些文本更改为输入字段

3 个答案:

简介

使用contenteditable属性

使用input即时添加

使用`contenteditable`属性

使用`input`即时添加