本文旨在解决如何通过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元素。
-
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 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> 标签放在 </script>
评论（已关闭）
评论已关闭