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

如何通过按钮将字符串输入到字段中

DDD

发布： 2025-08-16 17:08:28

原创

721人浏览过

如何通过按钮将字符串输入到字段中

本文将介绍如何使用HTML表单、JavaScript函数以及按钮点击事件，实现将文本框中的字符串输入到另一个div元素中显示的功能。我们将重点解决页面重载问题，并提供简洁有效的解决方案，确保用户输入的内容能够正确地显示在目标区域。

HTML结构

首先，我们需要创建一个包含文本输入框和按钮的HTML表单。

<form id="myForm">
    <div>
        <input type="text" id="snfield" value="any text" maxlength="20" minlength="1" required>
        <button type="button" onclick="addnewSN()">Enter Serialnumber</button>
    </div>
</form>
<div id="sn"></div>

登录后复制

关键点：

快转字幕

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

357

查看详情

type="button": 将 <button> 的 type 属性设置为 "button" 可以阻止按钮触发表单提交的默认行为，从而避免页面重载。
id="myForm": 为 form 标签添加 id 属性，方便后续使用 JavaScript 获取表单元素。
id="snfield": 为输入框添加 id 属性，方便后续使用 JavaScript 获取输入框的值。
id="sn": 为显示文本的 div 标签添加 id 属性，方便后续使用 JavaScript 修改其内容。

JavaScript函数

接下来，我们需要编写一个 JavaScript 函数，用于获取文本输入框中的值，并将其添加到目标 div 元素中。

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

登录后复制

关键点：

document.getElementById('snfield').value: 使用 document.getElementById() 方法获取 id 为 "snfield" 的元素，并使用 .value 属性获取其值。
document.getElementById('sn').innerHTML += text: 使用 document.getElementById() 方法获取 id 为 "sn" 的元素，并使用 .innerHTML += text 将文本添加到该元素的内容中。

完整代码示例

将上述 HTML 结构和 JavaScript 函数结合起来，即可实现所需的功能。

<!DOCTYPE html>
<html>
<head>
<title>输入字符串到字段</title>
<script>
    function addnewSN() {
        var text = document.getElementById('snfield').value;
        document.getElementById('sn').innerHTML += text;
    }
</script>
</head>
<body>

<form id="myForm">
    <div>
        <input type="text" id="snfield" value="any text" maxlength="20" minlength="1" required>
        <button type="button" onclick="addnewSN()">Enter Serialnumber</button>
    </div>
</form>
<div id="sn"></div>

</body>
</html>

登录后复制

注意事项