Question

我正在尝试创建一个网页。但是主要是这个。如果有人在textarea中键入内容，则可以使用javascript来获取其价值，并将其显示为英雄文本。有可能吗？

* {
  margin: 0;
  padding: 0;
}

h1 {
  margin-left: 500px;
}

<textarea id="input"></textarea>
<h1 id="hero_text"></h1>
<button class="test" id="test">Enter</button>

Answer 1

让我们假设英雄形象的文字是这样的：

<h1 id='hero_text'></h1>

您的文本区域是：

<textarea id='input'></textarea>

然后，您可以使用文本区域的onchange事件来跟踪用户何时更改文本区域中的文本，并相应地更新英雄文本：

编辑：要在用户键入时跟踪更改（而不是在取消选择文本区域后，请使用oninput而不是onchange）。

var h1 = document.getElementById('hero_text');
var textarea = document.getElementById('input');
textarea.oninput = function() {
  //note that inside this event handler, 'this' points to the textarea
  h1.innerHTML = this.value;
}

编辑2：以下是基于您刚刚提供的代码的代码段：

var h1 = document.getElementById('hero_text');
var textarea = document.getElementById('input');
var btn = document.getElementById('test');
btn.onclick = function() {
  //note that inside this event handler, 'this' points to the button
  h1.innerHTML = textarea.value;
}

<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
</head>
<body>
<style>
*
{
    margin: 0;
    padding: 0;
}

h1
{
    margin-left: 500px;
}

</style>

<script src="test.js"></script>


<textarea id="input"></textarea>
<h1 id="hero_text"></h1>
<button class="test" id="test">Enter</button>


</body>
</html>

如何为英雄文本设置textarea值？

1 个答案: