1

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

我还希望能够编辑此信息，因此如果用户单击带有文本的新创建的跨度，它将返回到具有当前信息的输入字段，以便他们进行编辑。

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

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

4

3 回答 3

1

Why not make a CSS style for :focus for the input, making it look like a text-box, and a CSS style otherwise which makes it look like an inline text element?

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;
}
于 2010-03-10T00:16:11.003 回答
1

我根据@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;
}
于 2010-03-15T05:34:08.207 回答
0

I don't exactly know the function on Flickr you're referring to, but also consider not changing the input's type at all, but just its style. Much easier and doable without fiddling in the DOM. A setting like

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

would make a text input look like a span.

A downside to this is that a text input, different from a <span>, always has a fixed width.

于 2010-03-10T00:14:38.110 回答