5
contenteditable="true"div 태그에서 깜박이는 텍스트 커서를 사용자 정의 할 수 있습니까?내용 입력 가능 요소에서 텍스트 커서 사용자 정의
커서 위치를 가져 와서 커스텀 커서를 넣는 것과 같은 것이나 다른 트릭이 있습니까?
A
답변
2
나는 Tim에 동의합니다.
(당신이 구글의 자바 스크립트 닌자 중 하나가하지 않는 데 도움이 : P) 그러나
, 여기에 그냥 당신에게를 제공하기에 .. <textarea>에 사용되는 custom caret와 샘플 페이지입니다 당신이 이것을 어떻게 달성 할 수 있는지에 대한 아이디어.
나는 이것이 custom 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)를!
6
커서를 직접 그려야합니다 (예 : Google 문서 도구의 기능). 이 작업을 수행하는 것이 중요한 사업이며이를 권장하지 않습니다.
조언 해 주셔서 감사합니다. 그래서 지금은 이것을 피할 것이고, 작은 글쓰기 앱에 대해 진지하게 알기 전까지는 이것을 구현하지 않을 것입니다. – Mostafa