javascript - javascript/html - 弹出/模式中的文本区域不可编辑

Question

我想要一个弹出模式，用户可以在其中选择图像并为此图像添加替代文本。弹出窗口按预期显示，（用户可以选择图像并上传它们）但是文本区域不可编辑。

打开模态的按钮：

<button type="button" onclick="openModal()">Add image</button>

弹出窗口：

function openModal() {
  var imageTemplate = document.getElementById("tpl-image");
  imageTemplate.style.display = "flex";
}

function closeModal() {
  var imageForm = document.getElementById("tpl-image");
  imageForm.style.display = "none";
}

<button type="button" onclick="openModal()">Add image</button>


<section class="popup-img" id="tpl-image" style="width:100%;height:100%;background-color:rgba(0, 0, 0, 0.6);position:absolute;top:0%;display:flex;justify-content:center;align-items:center;display:none;z-index:2000;">
  <section class="popup-img-content" style="width:500px;height:300px;background-color:white;border-radius:10px;text-align:center;padding:20px;position:relative;">
  <button type="button" onclick="closeModal()" class="close" style="position:absolute;top:0;right:14px;font-size:42px;transform:rotate(45deg);cursor:pointer;border-width:0px;background:none;">+</button>
  <form method="post" id="image-form" class="image-form" data-url="/url/to/post/request/" enctype="multipart/form-data">
    <h3>Select image to upload:</h3>
    <input type="file" name="image_file" id="image_file">
    <textarea name="alttext_image" id="alttext_image" class="js-question-text autosize" tabindex="1" style="word-break:break-word;display:block;width:100%;resize:none;" placeholder="Type alternative text for image">  </textarea>
    <button type="button" name="submit_image" id="btn-image-upload">Upload image</button>
  </form>
  </section>
  </section>

我已经在 openModal() 函数中尝试了以下两个选项： document.getElementById("alttext_image").readOnly = false;和document.getElementById("alttext_image").removeAttribute('readonly');. 但是，它们都没有改变任何东西：如果我点击 textarea，什么也没有发生，我不能添加任何文本。

我究竟做错了什么？

标签： javascripthtml