向 CSS 中的元素添加插入符号

问题描述

问题

我制作了一个 <textarea> 并使用 Javascript 将值放入 <pre> 标记中（contenteditable 很奇怪），我想要一种方法在 <pre> 中放入一个闪烁的插入符号{1}}，例如按 F7。我不能只使用 <textarea>，因为我正在制作一个 JSON 格式化程序（我很无聊）并且我想添加语法突出显示。

我有什么

document.querySelector("pre.stuff").addEventListener("click",function() {
  document.querySelector("textarea.text").focus();
});
document.querySelector("textarea.text").addEventListener("input",function() {
    document.querySelector("pre.stuff").innerText = this.value;
});

textarea.text {
  position: absolute;
    border: none;
  padding: 0px;
  opacity: 0;
  width: 0px;
  height: 0px;
}
pre.stuff {
    width: calc(100% - 20px);
    height: 250px;
    border: solid gray 2px;
    margin: 0px;
    border-radius: 5px;
    padding: 10px;
    transition: 0.3s;
    font-family: "Source Code Pro",monospace;
    tab-size: var(--tab-size);
    overflow: scroll;
    cursor: text;
}
textarea.text:focus ~ pre.stuff,pre.stuff:focus {
    outline: none;
    Box-shadow: #0066ff55 0px 0px 0px 4px; /* glowwww */
    border: solid #66a3ff 2px;
}
body {
    margin: 16px;
}

<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap" rel="stylesheet">
<textarea class="text"></textarea>
<pre class="stuff" spellcheck="false" tabindex="-1"></pre>
<br>
I removed the Syntax highlighting part :P

此外，焦点必须在 <textarea> 上，否则将不起作用。

解决方法

为此，您需要一个绝对定位的元素作为插入符，因为我知道没有 textarea 属性允许您操作插入符。因此，每当 textarea 的值发生变化时，您都必须创建自定义事件。 这是您的方法。

请注意，如果您觉得插入符号的过渡很烦人，可以删除它。 另请注意：为此我使用了一个库，位于 this link

const txtarea = document.querySelector("textarea.text");
        const invis = $('#faux');


        document.querySelector("pre.stuff").addEventListener("click",function() {
          document.querySelector("textarea.text").focus();
        });
        document.querySelector("textarea.text").addEventListener("input",function() {
            document.querySelector("pre.stuff").innerText = this.value;
        });

        txtarea.addEventListener("keyup",move_caret);
        txtarea.addEventListener("keydown",move_caret);


        function move_caret() {
            let select = document.getSelection();
            let index = txtarea.selectionStart;

            let background = getComputedStyle(txtarea).color;

            const editor = $("textarea.text");
            let pos = editor.caret('position');
            let left = pos.left + 2 + "px";
            let top = pos.top + 2 + "px";
            let height = pos.height + "px";
            var css_data = {
                left,top,height,background
            };
            $("#caret").css(css_data);

        }

* {
            position: relative;
        }
        textarea.text {
            min-width: calc(100% - 20px);
            word-wrap: nowrap;
            height: 250px;
            border: solid gray 2px;
            margin: 0px;
            border-radius: 5px;
            padding: 10px;
            transition: 0.3s;
            font-family: "Source Code Pro",monospace;
            tab-size: var(--tab-size);
            overflow: scroll;
            cursor: text;
            opacity: 0;
            pointer-events: none;
            position: absolute;
        }
        pre.stuff {
            max-width: calc(100% - 20px);
            word-wrap: break-word;
            height: 250px;
            border: solid gray 2px;
            margin: 0px;
            border-radius: 5px;
            padding: 10px;
            transition: 0.3s;
            font-family: "Source Code Pro",monospace;
            tab-size: var(--tab-size);
            overflow: scroll;
            cursor: text;
        }
        textarea.text:focus ~ pre.stuff,pre.stuff:focus {
            outline: none;
            box-shadow: #0066ff55 0px 0px 0px 4px; /* glowwww */
            border: solid #66a3ff 2px;
        }
        body {
            margin: 16px;
        }


        #caret {
            width: 2px; 
            display: inline; 
            position: absolute;

            transition: left 137ms linear,top 137ms linear;
            animation: blink 450ms linear alternate infinite;
        }

        @keyframes blink {
            0% {opacity: 0;}
            20% {opacity: .5;}
            75% {opacity: .78}
            100% {opacity: 1}
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Caret.js/0.3.1/jquery.caret.min.js" integrity="sha512-qclRGh1kwCdmGsi68M9XYAhbCC4xpGRq9VqVlYAQmsG29wQG0DKke/QiMFmuFY1NGXdJ75Wjkhez5nMcuTelgQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="caret"></div>
    <span id="faux" style="display:none"></span>
    <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap" rel="stylesheet">
    <textarea class="text"></textarea>
    <div style="display: inline; width: min-content; height: min-content;">
        <pre class="stuff" spellcheck="false" tabindex="-1"></pre>
        
    </div>
    <br>

,

我修好了

我将<textarea>的宽度和高度设置为<pre>的宽度和高度，并将color设置为transparent并将caret-color设置为{ {1}}。我还删除了边框和所有其他东西，显然它有效！这有点像 hacky，但是当我将 black 和 font-size 设置为与 font-family 标记相同时，它可以完美运行。

它在这里

<pre>

document.querySelector("pre.stuff").addEventListener("click",function() {
  document.querySelector("textarea.text").focus();
});
document.querySelector("textarea.text").addEventListener("input",function() {
    document.querySelector("pre.stuff").innerText = this.value;
});

textarea.text {
  position: absolute;
    border: solid transparent 2px;
  padding: 10px;
  width: calc(100% - 20px);
  height: 250px;
  color: transparent;
  caret-color: black;
  z-index: -1;
  font-size: 17px;
  outline: none;
  font-family: "Source Code Pro",monospace;
  background-color: transparent;
}
pre.stuff {
    width: calc(100% - 20px);
    height: 250px;
    border: solid gray 2px;
    margin: 0px;
    border-radius: 5px;
    padding: 10px;
    transition: 0.3s;
    font-family: "Source Code Pro",monospace;
    tab-size: var(--tab-size);
    overflow: scroll;
    cursor: text;
  font-size: 17px;
}
textarea.text:focus ~ pre.stuff,pre.stuff:focus {
    outline: none;
    box-shadow: #0066ff55 0px 0px 0px 4px; /* glowwww */
    border: solid #66a3ff 2px;
}
body {
    margin: 16px;
}

它不是完美，但对我有用。