将输入文本更改为模糊的常规文本并能够编辑 jQuery

Question

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

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

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

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

Answer 1

为什么不为输入创建一个 CSS 样式 :focus ，使其看起来像一个文本框，或者创建一个 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;
}

Answer 2

我根据@strager的建议进行了尝试，并编写了以下功能出色的代码

jQuery:

$(":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');
                 }
            });

和 CSS:

 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;
}

Answer 3

我不太清楚您所指的 Flickr 上的功能，但也考虑根本不更改输入的类型，而只是更改其样式。无需摆弄 DOM，就变得更容易、更可行。像这样的设置

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

会使文本输入看起来像一个跨度。

这样做的缺点是，与 不同，文本输入始终具有固定宽度。