当前位置：文江博客话题详情

在 contenteditable 元素中自定义文本光标

发布于 2024-12-19 18:34:24 字数 117 浏览 1 评论 0原文

是否可以在 contenteditable="true" div 标记中自定义闪烁文本光标？

比如获取光标位置并在其上放置自定义光标，或者任何其他技巧？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

破晓 2024-12-26 18:34:24

必须绘制自己的光标（例如，Google Docs 就是这样做的）。这样做是一项艰巨的任务，我不会推荐这样做。

回复收藏 0 原文

ぽ尐不点ル 2024-12-26 18:34:24

我同意 Tim 的观点，我也不会推荐它。

（除非您有 Google 的 javascript 忍者之一来帮助您:p）

但是，这里是一个示例页面，其中包含在 中使用的<code>自定义插入符</code>。 </code>.. 只是为了让您了解如何实现这一目标。

我相信这是自定义插入符最基本的实现。

<!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)！

I agree with Tim, I wouldn't recommend it either.

( unless you have one of Google's javascript ninjas to help you :p )

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.

I beleive this is the most basic implementation of a 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>

Good luck implementing this in a contenteditable.. And I certainly hope this won't be your next question (:p) !

回复收藏 0 原文

~没有更多了~