时间戳

首页 > 解决方案 > jQuery .scrollLeft() 在我输入 contenteditable div 时不匹配

jquery - jQuery .scrollLeft() 在我输入 contenteditable div 时不匹配

问题描述

编辑 在评论中，有人指出缺乏澄清。我正在构建一个文本编辑器。我最初使用包含所有文本的 contenteditable div，但意识到如果我希望它像编程编辑器那样更改特殊关键字的文本颜色，我需要使用更好的系统，因为大约 30-50 行后它会慢慢更改文本颜色。我本可以坚持前面提到的想法并让它发挥作用（更好），但我没有，而是转而采用将每条线路分开的想法。我目前将每一行拆分为一个新的 contenteditable div，并且每一行都位于父 div 中。显然这很复杂，但我实现了它并让所有自定义键功能正确执行它们最初所做的操作，例如使用键箭头向上、向下、向左和向右移动，允许添加和删除文本，甚至还实现了热键。在此过程中，我遇到了每行不允许水平滚动跟随您当前键入的位置的问题。下面列出的示例封装了我的问题，没有过多解释。我真的只需要下面的答案，从那里我相信我可以就使用答案或文本换行达成共识，并找出我的行号的调整解决方案。

最初的问题：

我有一个非常特殊的使用可编辑 div 的案例。在我的情况下，我有一个 contenteditable div，它.keydown()可以防止默认设置，并且我添加了一个带有正在输入的字符的 span。

经验：

function captureKeys() {
  // Let's focus on div
  $("#editable-div").focus();
  
  $("#editable-div").on('keydown', function(event) {
      event.preventDefault(); // to stop the normal behavior **ISSUE**

      var span = $(document.createElement('span')); 
      span.text(event.key);

      $(this).append(span);
  });
}
  
$(document).ready( captureKeys );
/* Need to stop the text wrap for the editable-div */
#editable-div {
  white-space: nowrap;
  overflow-x: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>

<html lang="en">

  <body>
    <div id="editable-div" contenteditable=true>
      <!-- This is where it dynamically puts in strings -->
    </div>
  </body>
</html>

现在这是一个粗略的例子，不像我的例子那样精致，但它明白了重点。当您输入时，div 不会跟随您当前输入的位置。事实上，你根本不动，因为默认行为被阻止了，这意味着它需要被写入。这是因为event.preventDefault();在 key down 函数中。

我正在寻找解决方案来调整scrollLeft()没有箭头键的默认行为！我为箭头键编写了自定义函数，因此默认行为不是一个选项。

任何帮助将不胜感激！

// This is not what I want
function captureKeys() {
  // Let's focus on div
  $("#editable-div").focus();
  
  $("#editable-div").on('keydown', function(event) {
      if ([37,38,39,40].includes(event.keyCode)) { 
        // Allowing the default behavior
      } else {
        event.preventDefault(); // to stop the normal behavior of everything but arrow-keys
 
        var span = $(document.createElement('span')); 
        span.text(event.key);

        $(this).append(span);
      }
  });
}

标签： jqueryscrollcontenteditable

解决方案

推荐阅读