Javascript 自定义contenteditable元素中的文本光标
是否可以自定义Javascript 自定义contenteditable元素中的文本光标,javascript,html,css,contenteditable,Javascript,Html,Css,Contenteditable,是否可以自定义contenteditable=“true”div标记中闪烁的文本光标 比如获取光标位置并在其上放置自定义光标，或者其他任何技巧？必须绘制自己的光标（例如，谷歌文档就是这样做的）。做这件事是一项重要的任务，我不推荐这样做。我同意，我也不推荐这样做 （除非你有一个谷歌的javascript忍者帮你：p） 但是，下面是一个示例页面，其中有一个在中使用的自定义插入符号。。只是想让你知道如何才能做到这一点 我相信这是自定义插入符号的最基本实现 <!doctype html> &
contenteditable=“true”div比如获取光标位置并在其上放置自定义光标，或者其他任何技巧？必须绘制自己的光标（例如，谷歌文档就是这样做的）。做这件事是一项重要的任务，我不推荐这样做。我同意，我也不推荐这样做 （除非你有一个谷歌的javascript忍者帮你：p） 但是，下面是一个示例页面，其中有一个在
自定义插入符号。。只是想让你知道如何才能做到这一点
我相信这是自定义插入符号的最基本实现
<!doctype html>
<html>
<head>
<script type="text/javascript">
var cursor,
$ = function (id){
return document.getElementById(id);
},
nl2br = function(txt){
return txt.replace(/\n/g, "<br />");
},
writeit = function(from, e){
e = e || window.event;
var w = $("writer");
var tw = from.value;
w.innerHTML = nl2br(tw);
},
moveIt = function (count, e){
e = e || window.event;
var keycode = e.keyCode || e.which;
if(keycode == 37 && parseInt(cursor.style.left) >= (0-((count-1)*10))){
cursor.style.left = parseInt(cursor.style.left) - 10 + "px";
} else if(keycode == 39 && (parseInt(cursor.style.left) + 10) <= 0){
cursor.style.left = parseInt(cursor.style.left) + 10 + "px";
}
};
window.onload = function (){
cursor = $("cursor");
cursor.style.left = "0px";
};
</script>
<style type="text/css">
body{margin: 0px;padding: 0px;height: 99%;}
textarea#setter{left: -1000px;position: absolute;}
.cursor{font-size: 12px;background-color: red;color: red;position: relative;opacity: 0.5;}
#terminal{margin: 8px;cursor: text;height: 500px;overflow: auto;}
#writer{font-family: cursor, courier;font-weight: bold;}
#getter{margin: 5px;}
</style>
</head>
<body>
<div id="terminal" onclick="$('setter').focus();">
<textarea type="text" id="setter" onkeydown="writeit(this, event);moveIt(this.value.length, event)" onkeyup="writeit(this, event)" onkeypress="writeit(this, event);"></textarea>
<div id="getter">
<span id="writer"></span><b class="cursor" id="cursor">B</b>
</div>
</div>
</body>
</html>
变量游标，
$=函数（id）{
返回文档.getElementById（id）；
},
nl2br=函数（txt）{
返回txt.replace（/\n/g，“
”）；
},
writeit=函数（from，e）{
e=e | | window.event；
变量w=$（“编写者”）；
var tw=from.value；
w、 innerHTML=nl2br（tw）；
},
moveIt=函数（计数，e）{
e=e | | window.event；
var keycode=e.keycode | | e.which；
if（keycode==37&&parseInt（cursor.style.left）>=（0-（（count-1）*10）））{
cursor.style.left=parseInt（cursor.style.left）-10+“px”；
}否则如果（keycode==39&&（parseInt（cursor.style.left）+10）谢谢你的建议。所以我现在就避免这样做，在我认真对待我的小写作应用程序之前，我不会尝试实现它。