H5的新属性contenteditable

之前做项目的时候，设计问题的题题目和选项用的都是div，然后给div设置contenteditable的属性值，这样的做的原因是容易操作，也不用考虑太多的兼容性问题，但是也衍生出了其他的问题

contenteditable的介绍

* contenteditable 属性指定元素内容是否可编辑。属性值为true则可编辑，false则不能编辑

	<p contenteditable="true">这是一个可编辑段落。</p>

(![https://img-blog.youkuaiyun.com/20171013095945461?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQW15X2hhcHBpbmVzcw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast](https://img-blog.youkuaiyun.com/20171013095945461?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQW15X2hhcHBpbmVzcw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast))
* 当元素中没有设置 contenteditable 属性时，元素将从父元素继承。

	<div  contenteditable="true">
		<p>这是一个段落。是可编辑的。尝试修改文本。</p>
		<span>dewde</span>
	</div>

![运行效果](https://img-blog.youkuaiyun.com/20171013094142363?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQW15X2hhcHBpbmVzcw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

contenteditable 的输入验证

设置此属性的div（后面直接用contenteditable代替），和表单中的输入框还是有些区别的：
	*  失去焦点的事件 blur
	input元素失去焦点，如果在失去焦点的事件中没有通过验证的话，用focus()就可以将焦点放在输入内容的最后面，如果没有清空输入内容的情况下，而contenteditable在失去焦点事件触发，进行输入内容的验证的时候，如果没有清空输入的内容，则利用focus()获取焦点的时候，光标会在输入内容的最前面，很不方便。为了将光标放在输入内容的最后面，在网上查了一些方法，觉得最合适的就是这个：

	function setFocus(dom) {
        dom.focus();
        var range = document.createRange();
        range.selectNodeContents(dom);
        range.collapse(false);
        var sel = window.getSelection();
        //判断光标位置，如不需要可删除
        if(sel.anchorOffset!=0){
            return;
        };
        sel.removeAllRanges();
        sel.addRange(range);
    }

dom是DOM对象，如果是用jquery对象，需要先将其转换为DOM对象
jquery对象转换DOM对象的方法

	 $demo = $("#demo"); 
	 demo=$demo[0]; 

其它事件现在还没有进行试验，以后进行补充