關於如何進行現場編輯可降解的任何想法？

Question

我目前正在爲MooTools編寫一個就地編輯腳本，我對於如何讓它在沒有JavaScript的情況下優雅地退化，同時還有一些功能有點難以理解。我想用某種方式使用漸進式增強。我不是在尋找代碼，而是一個關於如何處理這種情況的概念。如果您有任何想法或瞭解任何適當降級的編輯原地腳本，請分享。

Answer 1

這聽起來像你可能會從錯誤的方向接近這一點。與其創建就地編輯並使其良好降級（優雅的降級角度），您應該真正創建一個非Javascript版本進行編輯，然後在頁面加載後使用Javascript添加編輯原地，並將其轉換爲如Progressive Enhancement。

有兩種選擇。使用不帶Javascript的提交按鈕創建顯示爲表單，然後使用Javascript將輸入替換爲執行就地編輯的某種標籤。您應該能夠使用標籤和ID屬性的組合來挑選正確的屬性，以便就地編輯實施工作。如果您不希望表單默認顯示，則另一個選項是使用按鈕/鏈接顯示值，以便使用服務器端處理將其轉換爲表單，然後將edit-in-palce添加到該表單中。

Answer 2

如果沒有JavaScript，就不能進行就地編輯，所以優雅的降級包括確保用戶在JavaScript不可用時仍然可以編輯有問題的項目。

因此，我只是有一個鏈接來編輯有問題的整個項目，然後在頁面加載時在JavaScript中創建編輯原地控件，隱藏編輯鏈接，如果你不想用戶使用編輯可用時。

Answer 3

如果是文本內容，您可以將可編輯內容顯示爲輸入類型提交按鈕，並將內容作爲標題。點擊後，它會提交整個表單，保留其他值，並顯示編輯對話框。之後，表單值可以恢復。

Answer 4

也許把一個輸入在每個元素下有一個編輯的div。當頁面加載時，使用javascript來隱藏這些div。這樣，只有JavaScript不會觸發，它們纔會有用。

Answer 5

我asuming你正在試圖做的是類似以下情形：

<li> 
    <span id="editable">Editable text</span> <a class="edit_button"> </a> 
</li> 

凡<一>是一個按鈕，取代了< SPAN>與<輸入>，所以它可以被編輯。有幾種方法可以使其優雅地降級（例如，在沒有JavaScript的情況下工作）。

從理論上講：

使用CSS，用僞選擇這樣做。 ：active有點像onclick事件，所以如果您在< li>中嵌套了一個隱藏的輸入> < li>，則該CSS會隱藏< span>，並在單擊li時顯示< input>。

 
li:active #editable { 
    display:none; 
} 
li:active input{ 
    display:block; 
} 

這可能會在您最喜歡的瀏覽器中工作，但您無疑會發現它在IE中斷。

在實踐中：

使用鏈接。有沒有這個< a>是一個實際的鏈接，進入這個輸入/跨度替換已完成服務器端的頁面。你堅持在<一個的事件處理程序>使用MooTools的取消單擊事件誰擁有JS的人，像這樣的：

 

function make_editable(evt) { 
    var evt = new Event(evt); 
    evt.preventDefault(); 
} 

Answer 6

嘗試使用樣式輸入文本，並加載頁面後使其只讀，使用readonly屬性。 ，當點擊它時，刪除readonly屬性，並使onblur再次只讀。 當點擊「保存」按鈕或onblur事件時發出Ajax請求將數據保存在服務器中。