javascript - 在 IME 编写期间将光标移动到其他文本框

Question

我想在用户键入时使用 javascript 将光标移动到另一个文本输入字段。当部首组成时(韩文、日文、中文)，它会导致意想不到的行为。

例如如果用户在第一个文本框中键入 나，光标应该移动到第二个。但是，当继续在第二个文本框中输入时，第一个文本框中的 나 仍然存在。

[|   ]  [    ]      cursor in first box
[나   ]  [|   ]      typed 나 and cursor move
[나   ]  [난|  ]      typed ㄴ

仅输入 ㄴ+ㅏ+ㄴ 会生成字符 나, 난 而不是 나, ㄴ。

const a = document.getElementById("a");
const b =  document.getElementById("b");
a.oninput = e => { if (a.value == '나') b.focus(); };

<input type="text" id="a">
<input type="text" id="b">

我想在 Windows 和 MacOS 上支持 Chrome、Safari、Firefox、Opera、Edge。

---

更广泛的日志。

const a = document.getElementById("a");
const b =  document.getElementById("b");
const c =  document.getElementById("c");

[a, b].forEach(el => {
  let log = e => c.textContent += `${el.id} ${event.type}: ${event.data}\n`;

  el.addEventListener("blur", log);
  el.addEventListener("keydown", log);
  el.addEventListener("compositionstart", log);
  el.addEventListener("compositionupdate", log);
  el.addEventListener("compositionend", log);
  el.addEventListener("input", log);
});

a.addEventListener("input", e => {
  if (a.value == '나') b.focus();
});

<input type="text" id="a">
<input type="text" id="b">
<br><pre type="text" id="c"></pre>

输出:

a keydown: undefined
a compositionstart: 
a compositionupdate: ㄴ
a input: ㄴ
a keydown: undefined
a compositionupdate: 나
a input: 나
a compositionend: 나
a blur: undefined
b keydown: undefined
b compositionstart: 
b compositionupdate: 난
b input: 난
// on clicking somewhere else => blurring the b field
b compositionend: 난
b blur: undefined

Answer 1

嗯，这很容易做到。您只需要在 a 上调用 blur。

const a = document.getElementById("a");
const b =  document.getElementById("b");
a.oninput = e => { if (a.value == '나') { b.focus();a.blur(); } };

<input type="text" id="a">
<input type="text" id="b">