contentEditable

   今天用了下contentEditable属性，感觉不错。在有contentEditable这个属性以前，一般做这个效果时，就会需要两个元素了，一个是待编辑的元素，另一个是一个type="text"类型的input,当需要进行编辑时，将第一个元素隐藏起来，将ｉｎｐｕｔ显示出来，造成一种可编辑的假象。有了contentEditable,就只需要一个元素了，需要编辑时，将其ｃｏｎｔｅｎｔＥｄｉｔａｂｌｅ属性设为ｔｒｕｅ即可。但有几点需要注意：

1）设contentEditable为ｔｒｕｅ之后，元素虽然可编辑，但不像input那样有边框可以很方便地看出其范围，需要我们自己设置样式，比如加个边框，加个背景色什么的;

２）设ｃｏｎｔｅｎｔＥｄｉｔａｂｌｅ为ｔｒｕｅ的元素，有ｆｏｃｕｓ事件，但没有ｓｅｌｅｃｔ事件，所以没办法自动“全选”;

３）不像ｉｎｐｕｔ那样有ｍａｘｌｅｎｇｔｈ可以直接调用，控制编辑的长度就要靠我们自己了;

４）编辑后的文本，如果带有<>，会自动进行转义，比用ｉｎｐｕｔ安全，当然，如果用ｉｎｐｕｔ我们可以自己手动去转一下。

转载于:https://www.cnblogs.com/cly84920/archive/2011/06/01/4426599.html