將輸入文本更改爲模糊的常規文本和編輯jQuery的功能

Question

我正在創建一個表單，我不使用保存按鈕。該表格由輸入文本框和textareas組成。在用戶將數據輸入到輸入字段後，我想要觸發一個onBlur函數並將輸入更改爲包含用戶輸入的信息的跨度。

我也希望能夠編輯這些信息，所以如果用戶點擊新創建的帶有文本的跨度，它將會返回到輸入字段並帶有當前信息以供編輯使用。

僅供參考，我正在尋找一種功能，就像在Flickr上編輯照片標題一樣。

如果可能的話，我還想讓文本框在模糊之後顯示「保存...」半秒以反映與服務器的交互。

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

Answer 2

我不完全知道你所指的Flickr上的功能，但也可以考慮不改變輸入的類型，而只是改變其風格。沒有在DOM中擺弄，更容易和可行。像

的設置

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

會使文本輸入看起來像一個範圍。

不利之處在於，文本輸入與<span>不同，總是具有固定的寬度。

Answer 3

爲什麼不爲輸入製作: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; 
}