尝试用CSS更新代码镜像文本区域，但它没有改变任何东西

Question

现在我正在尝试在浏览器中创建一个代码编辑器。

对于语法高亮，我选择使用代码镜像。代码镜像的问题在于，当我们使用代码镜像“对象”时，它无法正确使用常规 js，并且我的整个代码是围绕侦听器和其他东西构建的。

所以我找到了解决方法。我想创建 2 个文本区域，一个位于另一个之上。顶部的一个将是“代码镜像”文本区域，另一个看不到的将是普通文本区域。

我想这样做，所以当我单击代码镜像文本区域时，我基本上会关注后面的普通文本区域，并在输入下面的内容时基本上更新代码镜像文本区域。

编码后，我目前有 2 个文本区域，一个在另一个下面（见图）

当前状态

但是当我尝试将它们一个放在另一个之上时，它不起作用

我尝试使用 bootstrap 来代替普通的 css，因为这是我在项目中使用的，我认为这就是干扰的原因。还是什么都没有改变

我尝试使用内联CSS，因为我认为可能有东西覆盖了代码镜像中的CSS。还是什么都没有改变

我尝试在 css 中添加 !important 规则来更改某些内容。一切都没有改变..

代码：

{% extends 'base.html' %} 
{% block head %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.2/codemirror.min.css" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.2/theme/dracula.min.css" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.2/codemirror.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.2/mode/python/python.min.js" crossorigin="anonymous"></script>

<style>
  .form-group-relative {
    position: relative;
  }
  
  .code-textarea {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: 0.7;
  }
  
  .form-control {
    position: relative;
    z-index: 2;
  }
</style>

{% endblock head %}

{% block content %}
<h1 class="text-center mb-5">Webide Python Interpreter</h1>
  

<div class="container-fluid">
  <div class="row justify-content-center">
    <div class="col-md-6">
      <div class="card">
        <div class="card-body">
          <form id="form">
            <div class="form-group mb-3 form-group-relative">
              <textarea name="message" cols="50" rows="20" id="text-area" class="form-control"></textarea>
              <textarea name="code" id="code" rows="20" cols="50" class="code-textarea"></textarea>
            </div>
            <div class="btn-group mb-3" role="group">
              <button type="submit" id="run-btn" class="btn btn-primary btn-lg mr-2">Run</button>
              <button type="button" id="stop-btn" class="btn btn-danger mr-2">Stop</button>
              <button type="button" id="clear-terminal-btn" class="btn btn-secondary mr-2">Clear Terminal</button>
              <button type="button" id="share-link-btn" class="btn btn-info">Share Invite Link</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  const codeTextArea = document.getElementById("code");
  const textArea = document.getElementById("text-area");

  codeTextArea.addEventListener("focus", () => {
    textArea.focus();
  });
</script>

Answer 1

太棒了，我正在做一些非常类似的事情，我会尝试你的一般方法，谢谢