H5的新属性contenteditable

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

contenteditable的介绍

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

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

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

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

![运行效果](https://img-blog.csdn.net/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]; 

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