range 对象

最新推荐文章于 2023-07-02 12:45:18 发布

zzxboy1

最新推荐文章于 2023-07-02 12:45:18 发布

阅读量1.4k

点赞数 1

分类专栏： JS 文章标签：前端 JavaScript 光标移动到最后

本文链接：https://blog.youkuaiyun.com/zzxboy1/article/details/52228346

版权

本文介绍了在H5项目中模拟微信评论功能时遇到的问题，即文本焦点后光标总是位于文字开头。通过研究，利用range对象和window.getSelection（或document.selection针对IE9以下）解决了这一问题，提供了模块化代码以便后续查阅。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天在工作中做项目为了模拟微信评论，使用了h5的新属性contenteditable="true"，使得div和p标签可以像input和textarea标签一样编辑。但是问题是文本获得焦点后，光标总是定位在文字的开头。查阅资料后，发现要使用range对象来解决。

模块化的代码如下：

  po_Last: function(obj) {
       if (window.getSelection) { //ie11 10 9 ff safari
             obj.focus(); //解决ff不获取焦点无法定位问题
             var range = window.getSelection(); //创建range
             range.selectAllChildren(obj); //range 选择obj下所有子内容
             range.collapseToEnd(); //光标移至最后
         } else if (document.