javascript - 基本 JS : Adding characters at cursor position, 同时保持光标位置

Question

假设我正在制作一个基本的计算器，它允许用户输入整个表达式。我将使用一个简单的 <input>标签。

用户可以输入他们想要的任何内容，但我想让客户更容易，我想在他们输入 ( 后立即添加一个右括号，所以我设置了我的 javascript 来检测何时 (被输入到输入框，然后+= )到输入字段。

我的代码的问题在于它将括号添加到 结束 输入，无论他们在哪里键入括号，即使是在开头。

如何在光标所在的位置添加字符？

我的代码如下:

input = document.querySelector("input[type=text]");

input.addEventListener(`keyup`, (event)=>
{
  if(event.key === `(`)
  {
    input.value+=`)`;
  }
});

<input type="text" placeholder="Put mathematical expression"></input>

Answer 1

我相信这应该可以解决您的问题。

let input = document.querySelector("input[type=text]");

input.addEventListener(`keyup`, (event) => {
    if(event.key === '(') {
        let cursorPos = input.selectionStart;
        input.value = input.value.substr(0, cursorPos) + ')' + 
                      input.value.substr(cursorPos);
    }   
});