时间戳

首页 > 解决方案 > 用户输入文本框显示在同一页面上

html - 用户输入文本框显示在同一页面上

问题描述

我有一个用于用户输入的文本框，如何获取用户输入的输入并将其显示在同一页面上（无需重新加载或重定向到不同的页面）。（例如，对 YouTube 视频的评论）

到目前为止，这是我的用户输入文本框代码：

 <div class="container">
  <form>
    <label for="post" id="post">What's on your mind?</label><br>
    <input type="text" id="post-box" name="post">
    <button>Comment</button>
  </form>
 </div>

标签： htmlformsinput

解决方案

你的意思是这样吗？它需要 DOM 操作和事件侦听器。确保参考这两个以帮助您更多。:D

首先，添加事件侦听器以侦听表单键盘按下的任何更改（即使我只是将它放在全局范围内）。这里所有的听众都引用了https://www.w3schools.com/jsref/dom_obj_event.asp

其次更改 innerHTML 以显示您的姓名。这里供您参考 https://www.w3schools.com/jsref/prop_html_innerhtml.asp

<html>
<p id="p-display"></p>

<div class="container">
  <form>
    <label for="post" id="post">What's on your mind?</label><br>
    <input type="text" id="post-box" name="post">
    <button id="btn-submit">Comment</button>
  </form>
 </div> 

</html>

<script>
var post_item = document.getElementById("post-box");
var btn = document.getElementById("btn-submit");

addEventListener("keyup", function changeValue()
{
console.log(post_item.value);
document.getElementById("p-display").innerHTML = post_item.value;
});

</script>

推荐阅读