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

Question

这个问题是从超级用户迁移过来的，因为它可以在 Stack Overflow 上回答。 昨天迁移。

我正在制作一个像网站（这里）这样的打字机，它使用 textarea 和 javascript（来自按钮点击）从 textarea 添加/删除。

我想添加的下一件事是一个指示器，用于显示下一次更新（插入/删除）的位置，所以我猜它总是在 textarea 值的位置。

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

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

这就是我插入字符的方式

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

到 textarea + 一个按钮

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

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

（顺便说一句，我知道我在网站上拼错了打字机，稍后会修复）

Answer 1

我认为覆盖 textarea 属性是没有意义的。 您想要的指标已经在它的特性中。

从您的textarea删除disabled标签，并使用以下代码片段阻止键盘按下。 [因为不使用键盘打字是你的特点]

document.onkeydown = function (e)  {
  return false;
} 

如果你愿意，你可以将函数绑定到textarea焦点操作。

Answer 2

我对此的建议是让 textarea 处于活动状态，而不是禁用并始终处于焦点。 这样你就会得到你想要的闪烁效果。 然后在 textarea 上有一个pointer-events:none css，这样没有人可以点击它，你就有了你想要的眨眼。 所以我的步骤是：

1. 从 textarea 中删除disabled
2. 将pointer-events:none css 规则添加到 textarea
3. 在update()函数上，我观察添加一个focus或一个click事件，以便 textarea 将焦点放在每个insert()

Answer 3

如果您想创建自定义插入点（闪烁的线），您可以通过从文本中添加和删除所选符号（例如“|”）来实现。 也许这样的事情会做：

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;
}

注意：我是盲目地编写代码（我没有运行它以查看它是否有效），因此对于任何错误，我提前表示歉意。

Answer 4

一种方法是让循环不停地运行（可能带有requestAnimationFrame ？）来添加和删除| 每隔一秒的字符，这将模拟您在大多数文本区域内的常用文本位置指示器