即使用户单击页面上的其他任何地方，如何使光标始终停留在文本区域上？

Question

我正在使用 Angular & Electron 开发聊天应用程序。

我希望用户的光标始终位于用户键入消息的文本区域。当用户单击页面中的任何其他位置时，光标不应离开文本区域。这有助于用户随时随地输入，它只会在文本区域中输入。

我尝试了以下方法：

    setTimeout(() => {
      this.messageTextAreaInput.nativeElement.focus();
    }, 20);

我在 textarea 模糊事件中调用它。但是这个解决方案不允许我从其他消息中复制文本。当我 select 消息历史记录中的任何文本时，我的 selection 就会丢失。

还有其他方法可以实现吗？

我的应用供参考：

Answer 1

window.addEventListener("keydown", () => {document.getElementById("textarea").focus()});

<textarea id="textarea" ></textarea>

Answer 2

你可以尝试使用像

这样的东西

window.onclick = function(event) {
    if (!event.target.matches('.messageTextAreaInputClassName')) {
        document.getElementById('messageTextAreaInput').focus();
    }
}

这样点击文本区域以外的任何地方都会调用文本区域聚焦。

Answer 3

试试这个方法。您可以将焦点元素更改为您自己的可聚焦元素。

const focusOnTextInput = () => document.getElementById('input').focus();

document.addEventListener('click', focusOnTextInput);
document.addEventListener('DOMContentLoaded', focusOnTextInput);

<input type="text" id="input"/>

Answer 4

您可以检查按下的是哪个键，并可选择将按键附加到文本区域。但是，您基本上需要创建一个小型打字应用程序才能获得预期的行为。这是一个小例子，我用它来制作一个像文本区域一样的 semi-interactive 终端。默认情况下禁用文本区域，并根据需要附加按键并存储在名为 input 的变量中，您可以说这是正在键入的消息。

let altCtrl = false;
let input = '';
let txa = document.getElementById("textarea");
window.onkeyup = function(event){
    if(event.key == 'Alt' || event.key == 'Control'){
        altCtrl=false;
    }
    };
window.onkeydown = function(event){
    let keyPressed = event.key;
    const regex = /[^\p{L}]/;
    const allowed = /[0-9@#\s]/;
    const modifs = [/Shift/, /Alt/, /Backspace/, /Control/, /CapsLock/, /Tab/, /Escape/, /NumLock/, /Home/, /End/, /PageUp/, /PageDown/, /Enter/];
    const noPrintModifs = [/Alt/, /Control/];
    if(altCtrl == false){
        altCtrl = noPrintModifs.some(rx => rx.test(keyPressed));
    }
    let isMod = modifs.some(rx => rx.test(keyPressed));
    if((regex.test(keyPressed) || allowed.test(keyPressed)) && altCtrl == false && isMod == false){
        txa.append(keyPressed);
        input = input + keyPressed;
    }
    if(keyPressed == 'Backspace'){
        txa.readOnly=false;
        txa.innerHTML = txa.innerHTML.slice(0, -1);
        input = input.slice(0, -1);
        txa.readOnly=true;
    }
    if(keyPressed == 'Enter' && altCtrl){
        txa.append('\n');
    }
    if(keyPressed == 'Enter'){
        //do something with input text
        input = '';
    }
};

提示：您可能需要向 allowed 正则表达式添加更多符号。

即使用户单击页面上的其他任何地方，如何使光标始终停留在文本区域上？

How to make cursor always stay on textarea even if user clicks anywhere else on the page?

html

javascript

electron

angular