Question

我正在尝试使用div重新创建一个输入框，以便我可以在里面创建分数，冲量等。我希望用户能够点击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，因此在按下时，最后一个字符将被删除。

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

如果，用户想要在两个字符之间点击鼠标，那你打算怎么做？如何显示闪烁的插入符号或按下新键时将新文本添加到插入符号的位置而不仅仅是最后？

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

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

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

这篇SO帖子对你要找的东西有一些建议，谈论几位数学编辑：
online-visual-maths-equation-editor-which-can-be-implemented-in-website

＆＃13;

$(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>')
}

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

我对您的代码稍作修改，我在上面的评论中更改了我所说的内容，并使用了另一种方式来绑定事件：.on('keypress', ...)。
我也想办法把关键写到div上，看一看。

＆＃13;

$(document).ready(function() {
  renderInputBox('#answerSpace');

  $('#input1').on('click', function() {
    inputSelected = !inputSelected
    console.log(inputSelected);
  })

  var inputSelected = false

  $(document).on('keypress', function(e) {
    if (e.which == '13' && inputSelected) {
      console.log('test');      
    }else if (inputSelected){
      console.log(e.key);
      var currentText = $(".input").text();
      $(".input").text(currentText + e.key);
    }
  });
});

function renderInputBox(area) {
  $(area).html('<div class="input" id="input1"></div>')
}

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

2 个答案: