在模糊和编辑jQuery的能力上将输入文本更改为常规文本

我正在创建一个表单，在这个表单中，我不再使用保存按钮。表单由输入文本框和文本区域组成。在用户将数据输入到输入字段后，我想触发onBlur函数并将输入更改为包含用户输入的信息的范围

我还希望能够编辑此信息，因此，如果用户单击新创建的文本范围，它将返回到输入字段中，其中包含当前信息，以便于编辑

作为参考，我希望有一个类似于在Flickr上编辑照片标题的功能

---

如果可能的话，我也想让文本框显示“保存…”在模糊之后的半秒以反映与服务器的交互。

< P>我不完全知道你所指的Flickr函数，但也考虑不改变输入的类型，而只是它的风格。更简单、更可行，无需修改DOM。像这样的背景

background-color: white;
border-color: transparent;

将使文本输入看起来像一个跨距

---

这样做的一个缺点是，文本输入与

不同，总是有固定的宽度。

为什么不为

创建一个CSS样式：为输入设置焦点，使其看起来像一个文本框，或者设置一个CSS样式，使其看起来像一个内联文本元素

input.ez-edit {
    display: inline;
    padding: 0;
    background-color: transparent;
    border-style: none;
    color: inherit;
    font-size: inherit;
}

input.ez-edit:hover {
    text-decoration: underline;
}

input.ez-edit:focus {
    display: inline-block;
    padding: 3px;
    background-color: #FFFFFF;
    border: 1px solid #000000;
}

input.ez-edit:focus:hover {
    text-decoration: none;
}

我根据@strager的建议对此进行了研究，并编写了以下功能出色的代码


jQuery：

正如您所说，缺点是固定宽度，这是我想到DOM开关的主要原因之一。另外，如果文本输入有很多文本，如果背景被隐藏，它将如何工作。我会让它转一转，看看这个建议在我的场景中是否可行。谢谢，好主意。会让它旋转。但是，我仍然需要创建一个jquery函数，如果输入有文本，onBlur将显示“saving…”一秒钟，还需要创建一个占位符将信息发送到服务器。@eknown，这是一个很好的观点，这可能是将其放在特定于Javascript的样式表中的原因。
$(":text[value='']").addClass('empty');
            $(":text[value>='']").removeClass('empty');
            $('.ez-edit').blur(function() {
                if ($(this).val().length >= 0) {
                    $(this).removeClass('empty');
                 } 
                 if ($(this).val().length <= 0) {
                    $(this).addClass('empty');
                 }
            });

 input.ez-edit {
    font-family:"Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Verdana, sans-serif;
    font-weight:bold;
    display: inline;
    padding:5px 8px 5px 2px;
    background-color: transparent;
    border-style: none;
    border-top: 1px solid #cdcdcd;
    color: inherit;
    font-size: inherit;
}

input.ez-edit:hover {
    text-decoration: underline;
    /* following "pencil" img from: http://enon.in/6j */
    background:url(../images/pencil.gif) no-repeat right #ffffdc; 
    border-style:1px hidden;
    border-top:1px solid #fff;
    border-right-color:#fff;
    border-bottom-color:#fff;
    border-left-color:#fff;
}

input.ez-edit:focus, input.ez-edit:focus:hover {
    display:inline-block;
    border:1px solid #4d4d4d;
    font-size:12px;
    background-color:#FFFFDc;
    color:#333;
    font-weight:normal;
}