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

时间: 2018-01-25阅读: 2176标签: 光标

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


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

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

需要点击才出现光标,而且它的位置在内容区域的最后面,如果我们需要打开页面默认就出现,而且出现在第一个位置上,该如何实现呢?下面将给出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中,延迟执行。

吐血推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入...

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入...

3.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

4.休闲娱乐: 网页游戏入口... H5游戏入口... 绝地求生首次打折降价了点此访问

链接: http://www.fly63.com/article/detial/393

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全