有没有代码能让一个可编辑元素在被创建时自动选中?如图
HTML,JavaScript ,CSS都可以
有没有代码能让一个可编辑元素在被创建时自动选中?如图
HTML,JavaScript ,CSS都可以
<!-- 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);