javascript - 如何在按下字符键时使字符出现在 div 中

Question

我正在尝试使用 div 重新创建一个输入框，以便我可以在内部创建分数、surd 等。我希望用户能够单击 div 并按下某个键，并且正确的字符会出现在 div 内，但是当我单击 div 并按下某个键时什么也不会发生。

JS

$(document).ready(function() {
  renderInputBox('#answerSpace');

  $('#input1').on('click', function() {
    inputSelected = !inputSelected
    console.log(inputSelected);
  })

  let inputSelected = false

  $(document).keypress(function(e) {
    if (inputSelected) {
        $('#input1').text(e.which)
    }
})


function renderInputBox(area) {
  $(area).html('<div class="input" id="input1"></div>')
}

CSS

.input {
  min-width: 200px;
  min-height: 24px;
  border: 1px solid rgb(153, 153, 153);
  display: flex;
  flex-direction: row;
  padding: 1px;
}

.input:hover {
  border: 1px solid rgb(49, 156, 255);
  box-shadow: 0 0 1px rgb(49, 155, 255);
  cursor: text;
}

Answer 1

当我使用下面的方法时，您会看到您将遇到的问题，并且我确实在下面提到了您可能正在寻找的资源。

做你想做的事情，将按键写入 div 是没有问题的，但是，你必须自己实现每一个基本的文本编辑器行为，这是一项非常艰巨的任务。

作为下面的示例，我手动实现了 backspace，因此当按下它时，最后一个字符将被删除。

虽然这很容易，但是如果用户突出显示字符串中间的一些字母怎么办？在我们的例子中，我们仍然只会删除最后一个字符，但这不是您想要的。

如果，用户想要在 2 个字符之间单击鼠标，您将如何执行？您将如何显示闪烁的插入符号，或者当按下新键时在插入符号所在的位置添加新文本，而不仅仅是添加到末尾？

如果用户按下 Ctrl+Home 或 Shift+Home 会怎样？

您会看到重写基本编辑器功能的速度有多快。

虽然下面的示例向您展示了您想要做的基本本质，包括一些使选择更好的更改，但我认为您真正想要的是数学方程的预构建文本编辑器。

这篇文章对您正在寻找的内容有一些建议，讨论了几个数学编辑器:
online-visual-maths-equation-editor-which-can-be-implemented-in-website

$(document).ready(function() {
  let inputSelected = false

  renderInputBox('#answerSpace');

  $(document).on('click', function(e) {
    inputSelected = $(e.target).is($('#input1'));
  })

  $(document).on('keyup', function(e) {
    //console.log(e.which);
    if (inputSelected) {
      switch (e.which) {
        case 8: // Backspace
          $('#input1').text($('#input1').text().substring(0, $('#input1').text().length - 1));
          break;
        default:
          $('#input1').text($('#input1').text() + e.key);
      }
    }
    /* Append div with character to #input1 */
  })
})

function renderInputBox(area) {
  $(area).html('<div class="input" id="input1"></div>')
}

.input {
  min-width: 200px;
  min-height: 24px;
  border: 1px solid rgb(153, 153, 153);
  display: flex;
  flex-direction: row;
  padding: 1px;
}

.input:hover {
  border: 1px solid rgb(49, 156, 255);
  box-shadow: 0 0 1px rgb(49, 155, 255);
  cursor: text;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='answerSpace'></div>