html让光标位置,科技常识：html5中contenteditable 光标_如何设置光标位置

今天小编跟大家讲解下有关html5中contenteditable 光标_如何设置光标位置 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关html5中contenteditable 光标_如何设置光标位置 的相关资料，希望小伙伴们看了有所帮助。

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

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

这是内容哦！

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

方法一:var p = document.getElementById('box'),

s = window.getSelection(),

r = document.createRange();

r.setStart(p, 0);

r.setEnd(p, 0);

s.removeAllRanges();

s.addRange(r);

如果你需要把元素清空 或者对应内容为空的时候 你可以这样做：var p = document.getElementById('box'),

s = window.getSelection(),

r = document.createRange();

p.innerhtml = '\u00a0';

r.selectNodeContents(p);

s.removeAllRanges();

s.addRange(r);

document.execCommand('delete', false, null);

方法二：var box= document.getElementById('box');

setTimeout(function() {

box.focus();

}, 0);

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

来源：爱蒂网

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时候联系我们修改或删除，多谢。