pre标签添加contenteditable="true"属性，换行时看不见光标
设置了ctrl+enter换行， 换行方式为在光标处添加'r'
但是不停换行会出现光标在可视窗口外的情况，滚动条不跟随光标滚动，请问应该怎么解决？代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<pre contenteditable="true" style="width: 500px;height: 500px;border:1px #000 solid;overflow-y: auto"></pre>
</body>
<script>
document.querySelector('pre').onkeydown = function($event){
var keycode = window.event ? $event.keyCode : $event.which;
var evt = $event || window.event;
// 回车-->发送消息
if (keycode == 13 && !(evt.ctrlKey)) {
// 发送消息的代码
$event.preventDefault();
return false;
}
// ctrl+回车-->换行
if (evt.ctrlKey && evt.keyCode == 13) {
insertContent('\r')
return false;
}
}
function insertContent(content){
if (!content) {//如果插入的内容为空则返回
return
}
var sel = null;
if (document.selection) {//IE9以下
sel = document.selection;
sel.createRange().pasteHTML(content);
} else {
sel = window.getSelection();
if (sel.rangeCount > 0) {
var range = sel.getRangeAt(0); //获取选择范围
range.deleteContents(); //删除选中的内容
var el = document.createElement("div"); //创建一个空的div外壳
window.hahaha = el;
el.innerHTML = content; //设置div内容为我们想要插入的内容。
var frag = document.createDocumentFragment();//创建一个空白的文档片段，便于之后插入dom树
var node = el.firstChild;
var lastNode = frag.appendChild(node);
range.insertNode(frag); //设置选择范围的内容为插入的内容
var contentRange = range.cloneRange(); //克隆选区
contentRange.setStartAfter(lastNode); //设置光标位置为插入内容的末尾
contentRange.collapse(true); //移动光标位置到末尾
sel.removeAllRanges(); //移出所有选区
sel.addRange(contentRange); //添加修改后的选区
}
}
}
</script>
</html>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
你只需要在每次换行的时候把scrollTop的值改变一下就好了。
pre.scrollTop = pre.scrollHeight