控制可编辑div中光标的位置

0 0

控制可编辑div中光标的位置3

我想实现点击按钮“插入内容”后，在div插入内容同时将光标移到最后面，请问这样写有什么问题，总是不能实现

function test1(){
    var div = document.getElementById("msgdiv");
    div.innerHTML += "这是测试";
    var range = document.createRange();
    var len = div.childNodes.length;
    range.setStart(div, len);
    range.setEnd(div, len);
    getSelection().addRange(range);
    div.focus();
}

<div>
    DIV:
    <div id="msgdiv" style="border:1px #f00 solid; width:300px; height:100px;" contenteditable="true"></div>
</div>
<div>
    <button onclick="test1()">插入内容</button>
</div>

问题补充：想在火狐和谷歌两个都能实现，但是现在都不行 <br />一开始直接点击按钮，然后直接点击键盘，文字确实是在插入的内容的后面，但再点击按钮后，光标就一直都是在最前面了 <br />后来测试了下，发现div一获得焦点，光标就一直都是在前面的

问题补充：用textarea的话就不用这么麻烦了 <br />就是想像QQ空间的个人中心里那个发表框一样

问题补充：chen_yongkai，还是一样不行

问题补充：我是想要火狐和谷歌也可以

div 光标

2012年3月19日 09:03

skymouse
0
0 0 1

4个答案按时间排序按投票排序

0 0

为什么我都可以呀，我用的是IE8

2012年3月19日 20:30

chen_yongkai
1600
1 1 23

添加评论

0 0

function test1(){   
    var div = document.getElementById("msgdiv");   
     div.focus();//先focus
    div.innerHTML += "这是测试";   
    var range = document.createRange();   
    var len = div.childNodes.length;   
    range.setStart(div, len);   
    range.setEnd(div, len);   
    getSelection().addRange(range);   
      
}

2012年3月19日 10:31

chen_yongkai
1600
1 1 23

添加评论

0 0

用textarea 吧

<html>
<head>

<script type="text/javascript">
function test1(){   
    var input = document.getElementById("msgdiv");   
    input.focus();
    input.value += "这是测试";   
}  

</script>
</head>

<body>
 <table>
    <tr><td>Input:</td></tr>     
    <tr><td><textarea id="msgdiv" rows="10" cols="30"></textarea>  </td></tr>
 </table>
<div>  
    <button onclick="test1()">插入内容</button>  
</div> 
</body>

2012年3月19日 10:00

chen_yongkai
1600
1 1 23