使用contentEditable進行內聯編輯使用​​不同類型的字段

Question

我有一個使用Bootstrap/jQuery UI庫的應用程序。

現在我期待在實現一個簡單的在線編輯功能...計劃使用HTML5 contentEditable財產

所以說，一個字段顯示如下; Field1: Value1

現在，如果用戶點擊Value1，價值Value1將在同一個地方，在進入或場的模糊的壓榨出現在文本框中的值將被替換。

現在頁面上有多個這樣的字段。雖然我知道我可以實現像div基本元素/領域contentEditable屬性等也有類似date一些輸入字段，下拉爲此我需要在線編輯以及...

所以不知道如果我可以使用contentEditable這樣的領域....象輸入型date領域將允許在線編輯，但應顯示爲在線編輯日期選擇器（我使用jQuery UI本）

我有一個Save最後按鈕。因此，點擊Save，所有這些新值將被髮送到服務器。

因此，我擔心的是，如果我可以使用contentEditable對各個領域進行在線編輯？

Answer 1

通常，您可以對這些input字段使用聯機編輯。

請記住，有一些問題，使用HTML5 contentEditable方法時：

• 在Chromium/Chrome的contentEditable嵌套到拖動（https://code.google.com/p/chromium/issues/detail?id=170139）時，不能進行編輯。 Chrome版本26.0.1384.2中仍未修復。

• 在Firefox中，當點擊嵌套在draggable中的contentEditable時，光標始終位於可編輯文本的起始位置。在版本18.0.1中仍然沒有修復。

• 在Internet Explorer contentEditable不能被施加到TABLE，COL，COLGROUP，TBODY，TD，TFOOT，TH，THEAD，並TR元件直接，內容編輯SPAN，或者DIV元件可以被置於其內的個別表格單元（見http://msdn.microsoft.com/en-us/library/ie/ms533690(v=vs.85).aspx）。

的注意事項安全：當contentEditable屬性設置爲TRUE用戶可以修改文件的內容。錯誤地使用此屬性可能會危及應用程序的安全性。 contentEditable屬性的錯誤使用可能包括不驗證用戶輸入。如果您不驗證用戶輸入，惡意用戶可以注入可能會損害您的數據的控制字符或腳本。您應該採取例程注意事項來防止顯示未經驗證的用戶輸入。