如何让可编辑元素在被创建时自动将已有内容选中吗？

Question

有没有代码能让一个可编辑元素在被创建时自动选中？如图

HTML，JavaScript ，CSS都可以

Answer 1

<!-- contenteditable="true"为H5新特性，该div为一个可编辑段落 -->
        <div id='pitchon' contenteditable="true">这是一个可以编辑的段落</div>



//getSelection()为用户选择的文本范围或光标的当前位置，这里是添加选中，那就是光标当前位置
            const selction = window.getSelection();
            const pitchon = document.getElementById('pitchon');
            //为pitchon添加焦点，如果不添加焦点，没有办法创建range，
            pitchon.focus();
            //获取要选中文字的长度
            const num = pitchon.innerHTML.length;
            //创建一个开始节点，这个节点就是焦点所在的节点，如果没有焦点，就无法获取焦点所在节点
            const range = selction.getRangeAt(0);
            //定义选中区域的起点，selction.anchorNode为选中区域所在的节点，selction.anchorOffset为起点偏移量
            range.setStart(selction.anchorNode,selction.anchorOffset);
            //定义选中区域的结束点，selction.focusNode为选中区域所在的节点，selction.focusOffset+num为结束点偏移量，这里的偏移量为想要选择的文字的长度。
            range.setEnd(selction.focusNode,selction.focusOffset+num);