如何通过按钮将字符串输入到字段并显示？-js教程-PHP中文网

如何通过按钮将字符串输入到字段并显示？

碧海醫心

发布： 2025-08-16 17:30:02

原创

131人浏览过

如何通过按钮将字符串输入到字段并显示？

本文旨在解决如何通过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应用程序。

以上就是如何通过按钮将字符串输入到字段并显示？的详细内容，更多请关注php中文网其它相关文章！