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

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

HTML 结构

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

  
        Enter Serialnumber  

解释：

快转字幕

新一代 AI 字幕工作站，为创作者提供字幕制作、学习资源、会议记录、字幕制作等场景，一键为您的视频生成精准的字幕。

357 查看详情 : 定义一个表单，并赋予ID “myForm”。: 创建一个文本输入框，name 属性用于提交表单时识别该字段，id 属性用于 JavaScript 中访问该元素，value 属性设置初始值，maxlength 和 minlength 限制输入长度，required 属性表示该字段为必填项。: 创建一个按钮，onclick 属性指定点击按钮时执行的 JavaScript 函数， type=”button” 阻止按钮默认的提交行为。

: 创建一个空的 div 元素，用于显示输入的文本。

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

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

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 代码整合在一起，得到完整的代码示例：

Enter Serialnumber