html - 如何将光标/文本位置指示器添加到由 javascript 控制的 <textarea>？

Question

我正在制作一个类似打字机的网站 (here)，它使用 textarea 和 javascript(通过按钮点击)在 textarea 中添加/删除。

接下来我要添加一个指示符，用于显示下一次更新(插入/删除)的位置，所以我猜它总是在 textarea 值的位置。

与其他解决方案冲突的关键细节是

• textarea 被禁用(+ 它是一个 textarea 而不是 p 标签)
• 用户通过使用按钮而不是通过键盘输入来添加字符
• 用户在输入时没有选择或有选择
• 一些解决方案涉及破坏网站的 CSS

这就是我插入字符的方式

function insert(char) {
    document.getElementById("textarea").value += char
    update()
}

到文本区域 + 一个按钮

<textarea id="textarea" class="textarea" disabled>
</textarea>

<a onclick="insert('1')"> 
    <div class="letterbox">
        <p class="typewritter">1</p>
    </div> 
</a>

(顺便说一句，我知道我在网站上的打字机拼写错误，稍后会修复)

Answer 1

如果您想创建一个自定义插入点(闪烁的线)，您可以通过在文本中添加和删除一个选定的符号(例如“|”)来实现，并带有一个间隔。也许这样的事情会做:

const insertionSymbol = '|';
const blinkInterval = 1000; // time in ms between insertion point updates
let blinking = true; // whether the insertion line is hidden
let textarea = document.getElementById('textarea');
setInterval(function() {
    if(blinking) {
        textarea.value += insertionSymbol;
    } else {
        textarea.value = textarea.value.slice(0,-1);
    }
    blinking = !blinking;
}, blinkInterval);

这将需要您更改插入和删除功能:

function insert(char) {
    if(blinking) {
        textarea.value += char;
    } else {
        // inserting the character before the insertion point by removing the insertion point temporarily 
        textarea.value = textarea.value.slice(0,-1) + char + insertionSymbol; 
    }
}
function delete() {
    if(blinking) {
        textarea.value = textarea.slice(0,-1);
    } else {
        // deleting the character before the insertion point by removing the insertion point temporarily 
        textarea.value = textarea.value.slice(0,-2) + insertionSymbol; 
    }
}

这个想法可以扩展。例如，如果您想添加一个插入点冷却(即更改插入点以在更新后保持可见一段时间，就像您在大多数文本编辑器中看到的那样)，您可以将间隔更改为每毫秒运行一次，并且为下次更新添加计时器。像这样:

// ... all the variable definitions like before
let timer = blinkInterval;
setInterval(function() {
    timer --;
    if(timer == 0) {
        if(blinking) {
            textarea.value += insertionSymbol;
        } else {
            textarea.value = textarea.value.slice(0,-1);
        }
        blinking = !blinking;
        timer = blinkInterval;
    }
}, 1);
function insert(char) {
    if(blinking) {
        blinking = false;
        textarea.value += char + insertionSymbol;
    } else {
        // inserting the character before the insertion point by removing the insertion point temporarily 
        textarea.value = textarea.value.slice(0,-1) + char + insertionSymbol; 
    }
    timer = blinkInterval;
}
function delete() {
    if(blinking) {
        blinking = false;
        textarea.value = textarea.slice(0,-1) + insertionSymbol;
    } else {
        // deleting the character before the insertion point by removing the insertion point temporarily 
        textarea.value = textarea.value.slice(0,-2) + insertionSymbol; 
    }
    timer = blinkInterval;
}

注意:我是在盲目地编写代码(我没有运行它来查看它是否有效)，因此对于任何错误，我深表歉意。