html - 为什么我不能输入或点击文本区域？

Question

我是 HTML 和 CSS 的新手，我遇到了一些无法自行解决的问题。

我的问题是我无法在我的 textarea 中输入内容，当我点击它时没有任何反应，而且，我试图将文本(“New Paste”)放在上面，但我不能看见。 Stackoverflow 上已经有关于 textarea 问题的问题，但它与我的问题不匹配。

• 如何将我的 textarea 位置更改为“New Paste”文本下方？

• 如何解决 textarea 的问题并向其写入内容？

function saveTextAsFile() {
  var textToWrite = document.getElementById('textArea1').innerHTML;
  var textFileAsBlob = new Blob([textToWrite], {
    type: 'text/plain'
  });
  var fileNameToSaveAs = "MakePython.py";

  var downloadLink = document.createElement("a");
  downloadLink.download = fileNameToSaveAs;
  downloadLink.innerHTML = "Download File";
  if (window.webkitURL != null) {
    // Chrome allows the link to be clicked without actually adding it to the DOM.
    downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
  } else {
    // Firefox requires the link to be added to the DOM before it can be clicked.
    downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
    downloadLink.onclick = destroyClickedElement;
    downloadLink.style.display = "none";
    document.body.appendChild(downloadLink);
  }

  downloadLink.click();
}

var button = document.getElementById('SaveFile');
button.addEventListener('click', saveTextAsFile);

function destroyClickedElement(event) {
  // remove the link from the DOM
  document.body.removeChild(event.target);
}

body {
  background-color: lightslategray
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0px;
  width: 100%;
}

li {
  float: left;
}

.text {
  display: block;
  color: white;
  text-align: center;
  padding: 16px 18px;
  background-color: teal;
  text-decoration: none;
}

li a:hover {
  background-color: black;
}

#textAreaOne {
  display: block;
  margin-left: auto;
  margin-right: auto;
  resize: none;
  width: 950px;
  height: 750px;
}

#SaveFile {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

#SaveFile:hover {
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

<ul>
  <li><a class="text" href="">Home</a></li>
  <li><a class="text" href="">About</a></li>
  <li><a class="text" href="">Contact</a></li>
</ul>
<p style="color: black;"><b>New Paste</b></p>

<textarea id="textAreaOne"></textarea>
<button id="SaveFile" type="button" value="Save File">Save</button>

Answer 1

将 position: fixed 更改为 sticky 可以解决“新粘贴”问题。

function saveTextAsFile() {
  var textToWrite = document.getElementById('textArea1').innerHTML;
  var textFileAsBlob = new Blob([textToWrite], {
    type: 'text/plain'
  });
  var fileNameToSaveAs = "MakePython.py";

  var downloadLink = document.createElement("a");
  downloadLink.download = fileNameToSaveAs;
  downloadLink.innerHTML = "Download File";
  if (window.webkitURL != null) {
    // Chrome allows the link to be clicked without actually adding it to the DOM.
    downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
  } else {
    // Firefox requires the link to be added to the DOM before it can be clicked.
    downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
    downloadLink.onclick = destroyClickedElement;
    downloadLink.style.display = "none";
    document.body.appendChild(downloadLink);
  }

  downloadLink.click();
}

var button = document.getElementById('SaveFile');
button.addEventListener('click', saveTextAsFile);

function destroyClickedElement(event) {
  // remove the link from the DOM
  document.body.removeChild(event.target);
}

body {
  background-color: lightslategray;
  margin: 0;
  padding: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: sticky;
  top: 0px;
  width: 100%;
}

li {
  float: left;
}

.text {
  display: block;
  color: white;
  text-align: center;
  padding: 16px 18px;
  background-color: teal;
  text-decoration: none;
}

li a:hover {
  background-color: black;
}

#textAreaOne {
  display: block;
  margin-left: auto;
  margin-right: auto;
  resize: none;
  width: 950px;
  height: 750px;
}

#SaveFile {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

#SaveFile:hover {
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

<ul>
  <li><a class="text" href="">Home</a></li>
  <li><a class="text" href="">About</a></li>
  <li><a class="text" href="">Contact</a></li>
</ul>
<p style="color: black;"><b>New Paste</b></p>

<textarea id="textAreaOne"></textarea>
<button id="SaveFile" type="button" value="Save File">Save</button>

正如我所说，您的文本区域工作正常。