如何在文本框中显示输入的文本？答案

【问题标题】：How to display entered text in an textbox?如何在文本框中显示输入的文本？
【发布时间】：2019-12-22 21:59:27
【问题描述】：

我想在输入字段中输入文本并将其显示在文本框中。

我认为这很容易。我需要一个输入来输入文本、一个按钮和一个文本框来显示我的文本。但是我的代码不起作用。

这是我的代码：

<!DOCTYPE html>
<link rel="stylesheet" href="style.css">

<script type="text/javascript">
function ausgabe(){
  var text=document.getElementById("text");
  var Wiedergabe=document.getElementById("Wiedergabe");
  var Text=text.value;
  Wiedergabe.value=Text
}

</script>
<div class="Webview">

  <div class="message_container" id="myForm" ></div>

  <form class="send_container">
    <input type="text">
    <button type="submit"
    value="Nachricht absenden"
    onclick="ausgabe">

  </form>



</div>


@charset "UTF-8";

.Webview{
  height: 400px;
  width: 300px;
}

.message_container{
  height: 80%;
  width: 100%;
  border:5px solid green;
}

.send_container{
  height: 20;
  width: 100%;
}

.send_container input{
  width: 70%;
  height:20%
  border:2px solid #1CE615;
}

.send_container button{
  width: 30%;
  height:20%;
}

【问题讨论】：

因为您只有 1 个输入，所以您使用 var Text = document.querySelector(".send_container input").value; 获得 first 输入

标签： javascript html css textbox

【解决方案1】：

我认为您对 id 和命名有一些误解，您试图访问名称错误的元素 - 解决方案可能如下：

  <input id="textField" type="text">
  <p>
     <input type="button" id="theButton" value="click me!" 
         onclick="document.getElementById('div').innerHTML = 
         document.getElementById('textField').value" />
  </p>
  <h3><div id="div"></div></h3>

【讨论】：

谢谢。这个对我有帮助！我试了一下，效果很好。但是当我想清除我的输入 TextField 并在第一条消息下方发送另一条消息时......我该怎么做才能不删除第一条消息而第二条消息保留在下面？
可以在这里找到类似的东西：stackoverflow.com/questions/43252275/…

【解决方案2】：

我在您的代码中发现了一些问题，让我在这里总结一下：

对于用户提供的文本的input 元素，您拥有<input type="text">，该元素还应具有id 属性，以便getElementById 捕获。
为了找到瞄准元素，您还需要提供正确的id 或class。我猜想使用message_container，您可以使用document.getElementsByClassName('message_container')[0] 来实现。然后，您可以使用 innerHTML 属性设置该元素的值。

所以根据我的解释，我认为这个解决方案可以为你工作：

const ausgabe = () => {
  const textInput = document.getElementById("text");
  const messageContainer = document.getElementsByClassName('message_container')[0];
  messageContainer.innerHTML = textInput.value;
}

<div class="Webview">
  <div class="message_container" id="myForm"></div>
  <form class="send_container">
    <input id="text" type="text" />
    <button type="button" onclick="ausgabe()">Nachricht absenden</button>
  </form>
</div>

我希望这会有所帮助！

【讨论】：