当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript输入字符串按钮教程

JavaScript输入字符串按钮教程

2025-08-22 12:30:32 0浏览收藏

哈喽！大家好，很高兴又见面了，我是golang学习网的一名作者，今天由我给大家带来一篇《JavaScript按钮输入字符串教程》，本文主要会讲到等等知识点，希望大家一起学习进步，也欢迎大家关注、点赞、收藏、转发! 下面就一起来看看吧！

使用 JavaScript 按钮向字段输入字符串：完整教程

本文将详细讲解如何使用 JavaScript 按钮将文本输入到字段并在另一个div中显示。我们将提供一个可运行的示例，并解释每个部分的工作原理，以及如何避免页面刷新问题。

HTML 结构

首先，我们需要创建一个包含文本输入框和按钮的 HTML 表单。以下是基本的 HTML 结构：

<form id="myForm">
  <div>
    &lt;input name=&quot;snfield&quot; type=&quot;text&quot; id=&quot;snfield&quot; value=&quot;any text&quot; maxlength=&quot;20&quot; minlength=&quot;1&quot; required&gt;
    <button onclick="addnewSN()" type="button"><label id="labelsn" for="snfield">Enter Serialnumber</label></button>
  </div>
</form>
<div id="sn"></div>

解释：

: 定义一个表单，并赋予ID "myForm"。
<input name="snfield" type="text" id="snfield" value="any text" maxlength="20" minlength="1" required>: 创建一个文本输入框，name 属性用于提交表单时识别该字段，id 属性用于 JavaScript 中访问该元素，value 属性设置初始值，maxlength 和 minlength 限制输入长度，required 属性表示该字段为必填项。
: 创建一个空的 div 元素，用于显示输入的文本。

注意： type="button" 是关键，它阻止了按钮的默认行为，即提交表单并刷新页面。

JavaScript 函数

接下来，我们需要编写 JavaScript 函数 addnewSN() 来获取输入框中的文本，并将其添加到 div 元素中。

function addnewSN() {
  var text = document.getElementById('snfield').value;
  document.getElementById('sn').innerHTML += text;
}

解释：

function addnewSN() { ... }: 定义一个名为 addnewSN 的函数。
var text = document.getElementById('snfield').value;: 获取 ID 为 "snfield" 的输入框的值，并将其存储在变量 text 中。
document.getElementById('sn').innerHTML += text;: 获取 ID 为 "sn" 的 div 元素，并将 text 的值添加到其现有的 HTML 内容中。 += 表示追加，而不是替换。

完整代码示例

将 HTML 和 JavaScript 代码整合在一起，得到完整的代码示例：

<!DOCTYPE html>
<html>
<head>
  <title>输入字符串示例</title>
</head>
<body>

<form id="myForm">
  <div>
    &lt;input name=&quot;snfield&quot; type=&quot;text&quot; id=&quot;snfield&quot; value=&quot;any text&quot; maxlength=&quot;20&quot; minlength=&quot;1&quot; required&gt;
    <button onclick="addnewSN()" type="button"><label id="labelsn" for="snfield">Enter Serialnumber</label></button>
  </div>
</form>
<div id="sn"></div>

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

</body>
</html>

避免页面刷新的其他方法

除了使用 type="button" 之外，还有其他方法可以避免页面刷新：

return false;: 在 onclick 事件处理程序中返回 false 可以阻止默认的表单提交行为。例如：
event.preventDefault();: 使用 event.preventDefault() 方法可以阻止默认事件的发生。需要将 event 对象传递给函数。

   function addnewSN(event) {
       event.preventDefault();
       var text = document.getElementById('snfield').value;
       document.getElementById('sn').innerHTML += text;
   }

HTML:

   <button onclick="addnewSN(event)">

表单的 onsubmit 事件: 在表单的 onsubmit 事件中返回 false。这将阻止表单提交到服务器。
```
<form id="myForm" onsubmit="return false;">
```

总结

通过本文，你学习了如何使用 JavaScript 按钮将文本输入到字段并在另一个 div 中显示。重要的是要阻止按钮的默认提交行为，以避免页面刷新。你可以使用 type="button"、return false; 或 event.preventDefault() 来实现这一点。根据你的具体需求选择最适合的方法。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript输入字符串按钮教程》文章吧，也可关注golang学习网公众号了解相关技术文章。