使用 contentEditable 进行具有不同类型字段的内联编辑

Question

我有一个使用 Bootstrap/jQuery UI 库的应用程序。

我现在正在考虑实现一个简单的内联编辑功能...计划使用 HTML5 contentEditable 属性

假设一个字段显示如下； Field1: Value1

现在，如果用户点击Value1，Value1 的值将出现在同一位置的文本框中，并且在按下回车键或字段模糊时，该值将被替换。

现在页面上有多个这样的字段。虽然我知道我可以为div 等基本元素/字段实现contentEditable 属性，但还有一些输入字段，例如date，我也需要对其进行内联编辑...

所以不确定我是否可以将contentEditable 用于此类字段....就像输入类型date 字段将允许内联编辑但应该显示一个日期选择器以进行内联编辑（我使用jQuery用户界面）

最后我有一个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 属性的错误使用可能包括不验证用户输入。如果您不验证用户输入，恶意用户可能会注入控制字符或脚本，从而损害您的数据。您应该采取常规预防措施，避免显示未经验证的用户输入。