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

2021-02-09 23:17

阅读：682

标签：content function let end node target document 通过 ted

在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 光标_如何设置光标位置

标签：content function let end node target document 通过 ted

原文地址：https://www.cnblogs.com/ypppt/p/13055552.html

上一篇：ES10（2019）——JSON、Array、Object、Function、try.catch、BigInt 能力升级

下一篇：webpack 中比较难懂的几个变量名称

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：html5中contenteditable 光标_如何设置光标位置
文章链接：http://soscw.com/index.php/essay/53308.html

亲，登录后才可以留言！

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

方法一:

方法二：

评论

热门文章

推荐文章

最新文章

置顶文章