JavaScript实现文本框输入并显示：一个简易教程-js教程-PHP中文网

JavaScript实现文本框输入并显示：一个简易教程

DDD

发布： 2025-08-16 16:12:01

原创

915人浏览过

javascript实现文本框输入并显示：一个简易教程

本文将引导你使用JavaScript创建一个简单的文本框和按钮，实现用户输入文本后，点击按钮将文本显示在另一个div中的功能。我们将重点解决页面刷新问题，并提供清晰的代码示例和注意事项，帮助你快速掌握这一实用技巧。

HTML结构

首先，我们需要创建一个包含文本框和按钮的表单，以及一个用于显示文本的div。

<form>
  <div>
    <input name="snfield" type="text" id="snfield" value="any text" maxlength="20" minlength="1" required>
    <button onclick="addnewSN('snfield'); return false;"><label id="labelsn" for="snfield">Enter Serialnumber</label></button>
  </div>
</form>

<div id="sn"></div>

登录后复制

JavaScript代码

立即学习“Java免费学习笔记（深入）”；

接下来，我们需要编写JavaScript函数addnewSN，该函数的功能是从文本框获取文本，并将其添加到目标div中。

function addnewSN(textId) {
  const textField = document.getElementById(textId);
  const text = textField.value;
  document.getElementById('sn').innerHTML += text;
}

登录后复制

关键问题：阻止页面刷新

问题的关键在于，点击按钮后页面会刷新，导致div中的内容被清空。这是因为按钮在表单中默认会触发表单提交，从而导致页面刷新。

解决这个问题的方法有两种：

在onclick事件中返回false：

芦笋演示
一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

34

查看详情

在按钮的onclick事件处理函数中，添加return false;可以阻止表单提交。修改后的HTML代码如下：
```
<button onclick="addnewSN('snfield'); return false;"><label id="labelsn" for="snfield">Enter Serialnumber</label></button>
```
登录后复制
return false;的作用是阻止事件的默认行为，也就是阻止表单提交。

在表单中添加onsubmit="return false;"：

另一种方法是在表单的onsubmit事件处理函数中返回false。修改后的HTML代码如下：

<form onsubmit="return false;">
  <div>
    <input name="snfield" type="text" id="snfield" value="any text" maxlength="20" minlength="1" required>
    <button onclick="addnewSN('snfield')"><label id="labelsn" for="snfield">Enter Serialnumber</label></button>
  </div>
</form>

登录后复制

这种方法会阻止整个表单的提交。

完整代码示例

<!DOCTYPE html>
<html>
<head>
  <title>文本输入显示示例</title>
</head>
<body>

  <form onsubmit="return false;">
    <div>
      <input name="snfield" type="text" id="snfield" value="any text" maxlength="20" minlength="1" required>
      <button onclick="addnewSN('snfield')"><label id="labelsn" for="snfield">Enter Serialnumber</label></button>
    </div>
  </form>

  <div id="sn"></div>

  <script>
    function addnewSN(textId) {
      const textField = document.getElementById(textId);
      const text = textField.value;
      document.getElementById('sn').innerHTML += text;
    }
  </script>

</body>
</html>

登录后复制

注意事项

textId 参数传递的是文本框的 id，而不是文本框的值。
可以使用 textField.value 获取文本框的值。
使用 innerHTML += text 会将新的文本追加到 div 中，如果需要替换原来的文本，可以使用 innerHTML = text。
使用 onsubmit="return false;" 阻止表单提交时，请确保表单中的其他按钮或输入框不会意外地触发表单提交。

总结

通过本文的教程，你学习了如何使用JavaScript创建一个简单的文本框和按钮，实现用户输入文本后，点击按钮将文本显示在另一个div中的功能。关键在于理解并解决页面刷新问题，可以通过在onclick事件或onsubmit事件中返回false来阻止表单提交。希望这个教程能帮助你更好地理解JavaScript事件处理和表单操作。

以上就是JavaScript实现文本框输入并显示：一个简易教程的详细内容，更多请关注php中文网其它相关文章！