在contenteditable元素中自定义文本光标 [英] Customizing text cursor in contenteditable element
本文介绍了在contenteditable元素中自定义文本光标的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
是否可以在 contenteditable =true div 标签中自定义闪烁文本光标？
Is it possible to customize blinking text cursor in a contenteditable="true" div tag?
像光标位置和放置自定义光标，或任何其他技巧？
Something like getting cursor position and putting a custom cursor on it, or any other trick?
推荐答案
我同意 Tim ，我也不推荐。
（除非您有 Google's javascript ninjas 之一来帮助您：p）
但是，下面是一个在< textarea> 自定义caret $ c> ..只是给你一个如何实现这个想法。
However, here is a sample page with a custom caret used in a <textarea>.. Just to give you an idea of how you can achieve this.
我想这是一个自定义caret 。
<!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>
在 contenteditable 中实现此操作的好运气。 。我当然希望这不会是你的下一个问题（：p）！
Good luck implementing this in a contenteditable.. And I certainly hope this won't be your next question (:p) !
这篇关于在contenteditable元素中自定义文本光标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
