一个contenteditable='true'的div，内部有一些内容，外部有一个按钮，点击按钮的时候让光标在div的最后面_JavaScript_论坛

一个contenteditable='true'的div，内部有一些内容，外部有一个按钮，点击按钮的时候让光标在div的最后面

lk***29 分类：JavaScript 人气：1072 回帖：2 发布于6年前收藏

html结构如下：

<div id='somediv' contenteditable='true'>
    <p>这里有一段文字</p>
    aaaaaaaa //有一些纯文本
</div>
<button id='btn'>点击</button>

js如下：

let d=document.getElementById('somediv');
let btn=document.getElementById('btn');
btn.onclick=function(){
    d.focus();
}

focus之后，光标在行div的最开头，怎么让光标到最后面

标签：chrome firefox html html5 javascript

讨论这个帖子（2）垃圾回帖将一律封号处理……

Lv3 码奴

踏***e Web前端工程师 6年前#1

尝试以下方法


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
    <div id='somediv' contenteditable='true'>
        <p>这里有一段文字</p>
    </div>
    <button id='btn'>点击</button>
<script>
    var d=document.getElementById('somediv');
    var btn=document.getElementById('btn');
    btn.onclick=function(){
        d.focus();
        var range = window.getSelection();//创建range
        range.selectAllChildren(d);//range 选择d下所有子内容
        range.collapseToEnd();//光标移至最后
    }
</script>
</body>
</html>

Lv5 码农

阴***光学生 6年前#2

请看属性 setSelectionRange

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取