html5中contenteditable 光标_如何设置光标位置

在js中,光标是一个对象,当你选中某个元素的时候才会出现光标对象。比如:我们点击一个输入框,实际会产生一个选中对象-selection,这个对象我们可以通过indow.getSelection()来获取;selection只存在1个,所以当你切换到其他输入框额时候,selection同样会跟着变化的。在选中的情况下有一个光标叫做range,和selection一样。

 

在contenteditable 属性中,当点击该区域的时候,光标默认显示在区域内容最后一位。如:

<div id="box"  contenteditable=true>
	这是内容哦!
</div>

需要点击才出现光标,而且它的位置在内容区域的最后面,如果我们需要打开页面默认就出现,而且出现在第一个位置上,该如何实现呢?下面将给出js的实现方法:

熊猫办公https://www.wode007.com/sites/73654.html

方法一:

1 var p = document.getElementById(box),
2     s = window.getSelection(),
3     r = document.createRange();
4 r.setStart(p, 0);
5 r.setEnd(p, 0);
6 s.removeAllRanges();
7 s.addRange(r);

 

如果你需要把元素清空,或者对应内容为空的时候,你可以这样做:

1 var p = document.getElementById(box),
2     s = window.getSelection(),
3     r = document.createRange();
4 p.innerHTML = \u00a0;
5 r.selectNodeContents(p);
6 s.removeAllRanges();
7 s.addRange(r);
8 document.execCommand(delete, false, null);

 

 

方法二:

1 var box= document.getElementById(box);
2 setTimeout(function() {
3     box.focus();
4 }, 0);

 

给box设置获取焦点。然后放置setTimeout中,延迟执行。

 

html5中contenteditable 光标_如何设置光标位置

上一篇:webpack性能优化2


下一篇:JS函数