本文旨在解决如何通过HTML表单中的按钮，将文本输入框（input field）中的字符串获取并显示在另一个div元素中的问题。文章将提供一个简洁的HTML表单，包含一个文本输入框和一个按钮。通过JavaScript函数，点击按钮即可将输入框中的文本内容添加到目标div中，并防止页面刷新。本文将详细讲解实现步骤，并提供注意事项，帮助开发者快速掌握该技巧。
实现步骤：
-
HTML 结构：
首先，我们需要创建包含文本输入框和按钮的HTML表单，以及用于显示文本的div元素。
<form id="myForm"> <div> <input type="text" id="snfield" value="any text" maxlength="20" minlength="1" required> <button onclick="addnewSN()">Enter Serialnumber</button> </div> </form> <div id="sn"></div>- id="myForm": 为表单指定一个ID，方便后续通过JavaScript操作。
- type="text": 定义一个文本输入框。
- id="snfield": 为文本输入框指定一个ID，方便后续通过JavaScript获取其值。
- value="any text": 设置输入框的默认值。
- maxlength="20": 限制输入的最大字符数为20。
- minlength="1": 限制输入的最小字符数为1。
- required: 表示该输入框为必填项。
- onclick="addnewSN()": 当按钮被点击时，调用 addnewSN() 函数。
- <div id="sn"></div>: 用于显示输入文本的div元素。
-
JavaScript 函数：
接下来，我们需要编写 JavaScript 函数 addnewSN()，该函数负责获取输入框中的文本，并将其添加到目标div中。
function addnewSN() { var snFieldValue = document.getElementById('snfield').value; document.getElementById('sn').innerHTML += snFieldValue; return false; // 阻止表单提交和页面刷新 }- document.getElementById('snfield').value: 获取 ID 为 snfield 的输入框的值。
- document.getElementById('sn').innerHTML += snFieldValue: 将获取到的值添加到 ID 为 sn 的 div 元素的 HTML 内容中。 += 运算符用于追加文本，而不是替换原有内容。
- return false;: 关键步骤！ 阻止表单的默认提交行为，防止页面刷新。 如果不阻止默认行为，点击按钮会导致页面重新加载，清空 sn div 中的内容。
-
阻止表单提交 (两种方法):
为了防止点击按钮后页面刷新，我们需要阻止表单的默认提交行为。有两种常用的方法：
-
方法一：在按钮的 onclick 事件中返回 false (推荐):
正如上面的 JavaScript 代码所示，在 addnewSN() 函数的末尾添加 return false;。 这会阻止按钮触发表单的提交行为。
-
方法二：在 <form> 标签中添加 onsubmit="return false;" 属性:
<form id="myForm" onsubmit="return false;"> <div> <input type="text" id="snfield" value="any text" maxlength="20" minlength="1" required> <button onclick="addnewSN()">Enter Serialnumber</button> </div> </form>这种方法会阻止整个表单的提交。 如果表单还有其他需要提交的元素，这种方法可能不适用。
-
完整代码示例：
<!DOCTYPE html>
<html>
<head>
<title>Add Serial Number</title>
</head>
<body>
<form id="myForm">
<div>
<input type="text" id="snfield" value="any text" maxlength="20" minlength="1" required>
<button onclick="addnewSN()">Enter Serialnumber</button>
</div>
</form>
<div id="sn"></div>
<script>
function addnewSN() {
var snFieldValue = document.getElementById('snfield').value;
document.getElementById('sn').innerHTML += snFieldValue;
return false; // 阻止表单提交和页面刷新
}
</script>
</body>
</html>注意事项：
- 确保 JavaScript 代码在 HTML 元素加载完毕后执行。可以将 <script> 标签放在 </body> 标签之前，或者使用 window.onload 事件。
- 如果需要多次添加文本，+= 运算符会追加文本到 sn div 中。 如果需要每次替换原有内容，可以使用 = 运算符。
- 可以使用 CSS 样式来美化输入框、按钮和显示文本的div元素。
- 如果表单有其他需要提交的元素，不建议使用 onsubmit="return false;"， 而是应该在按钮的 onclick 事件中返回 false。
总结：
通过本文的教程，你已经学会了如何使用 HTML 表单中的按钮，将文本输入框中的字符串获取并显示在另一个div元素中，并防止页面刷新。 这种方法可以用于各种场景，例如动态地向页面添加内容、创建简单的交互式表单等。 理解和掌握这种技巧，将有助于你构建更加灵活和用户友好的Web应用程序。
