Question

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

我的问题是我无法在textarea中键入内容，当我单击它时也什么也没有发生，因此，我试图在其上方放置文本（“ New Paste”），但看不到它。关于textarea问题，有关Stackoverflow的问题已经存在，但与我的问题不符。

如何将我的textarea位置更改为“新粘贴”文本下方？
我该如何解决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

将var sql = $"SELECT * From Authors Where AuthorId = {id}"; var author = db.Authors.FromSql(sql).FirstOrDefault();更改为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);
}

就像我说的那样，您的文本区域效果很好。

Answer 2

您的textArea ID textAreaOne ，但是您选择了 textArea1

var textToWrite = document.getElementById('textArea1').innerHTML;

<textarea id="textAreaOne"></textarea>

这就是为什么当您单击按钮时什么也没有发生。要修复此句柄的真实ID 我也想谈谈您的HTML

将标头的静态高度设为ul
使用<header>，<section>之类的HTML5标签
然后，由于页眉的位置为绝对位置或固定位置，请在该部分的顶部保留空白，因此这对相对高度不起作用。

例如：

<head>
    <style type="text/css">
        header {
            position: absolute;
            height: 50px;
            width: 100%;
            top: 0;
        }
        section {
            position: relative;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <header>
    ...blabla
    </header>
    <section>
    ...blabla
    </section>
</body>```

为什么不能在文本区域中键入或单击？

2 个答案: