Question

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

我还希望能够编辑这些信息，因此如果用户点击带有文本的新创建的跨度，它将返回到包含编辑乐趣的当前信息的输入字段。

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

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

Answer 1

为什么不为输入制作:focus的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;
}

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;

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

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

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

3 个答案: