带有文本区域的数学键盘（错误）

Question

我不是程序员，目前正在学习 HTML 和使用 Javascrip 编程。我对此很陌生，我不知道我的问题听起来是否太愚蠢了。我和一个朋友决定做一个数学键盘，这很困难，但我们设法得到了一些好东西。

一个解决起来非常复杂的问题是“丢失插入符位置”，我认为我们能够解决它。然而，一些按钮，当连续点击或重复点击超过两三次时，不会正确显示，这些不需要的问号不断出现在文本区域中。每个浏览器以不同的方式响应，我们怀疑它们的每个版本也是如此，因为我的笔记本（Windows 10 与 Chrome、Firefox 和 Edge 更新）和我朋友的笔记本之间存在差异。

下面是我们实现的函数代码，用于在单击按钮时显示符号。 myField.setSelectionRange (endPos + 1, endPos + 1) 是我们解决“丢失插入符号位置”问题的尝试，它似乎在大多数情况下都有效。

    function imprime(myValue) {

    myField = document.getElementById("entrada")

    if (myField.selectionStart || myField.selectionStart == '0') {
        var startPos = myField.selectionStart;
        var endPos = myField.selectionEnd;
        myField.value = myField.value.substring(0, startPos) + myValue.value + myField.value.substring(endPos, myField.value.length);
    } else {
        myField.value += myValue.value;

    }
    myField.focus();
    myField.setSelectionRange(endPos+1, endPos+1);
}

我们已经尝试修改了一些代码行，并研究了html代码中使用的字体是否有问题，但到目前为止我们还没有发现任何问题。

我们不知道发生了什么，我们想知道为什么这些事情一直发生以及如何解决它们。

提前致谢。

Answer 1

这不是字体问题。这是一个 unicode 字符串操作问题。

Javascript 使用 UTF-16 编码。一些数学字符在 Unicode 补充平面 1 中，在 UTF-16 中使用两个 16 位代码单元表示。同样，DOM setSelectionRange API 也使用 UTF-16。 spec for setSelectionRange 表示它索引代码单元，而不是字符。要正确地 select 使用那个 API，您需要考虑任何补充平面字符中的额外代码单元。

所以，发生的事情是，在输入补充平面字符（用两个代码单元表示）后，您正在设置两个代码单元之间的插入符号位置。然后，当输入下一个字符时，它会拆分这两个代码单元，并且它们不再是有效的字符表示。它们最终显示为 �.

带有文本区域的数学键盘（错误）

Mathematical keyboard with textarea (bugs)

html

javascript

fonts

textarea