将按钮文本填充到输入字段

基础概念

在用户界面设计中，按钮（Button）和输入字段（Input Field）是常见的元素。按钮通常用于触发某种操作，而输入字段则用于接收用户的输入数据。将按钮文本填充到输入字段是指将按钮上显示的文本内容复制到输入字段中。

类型

点击填充：用户点击按钮后，按钮的文本会被复制到输入字段中。
双击填充：用户双击按钮后，按钮的文本会被复制到输入字段中。
拖放填充：用户将按钮拖动到输入字段中，按钮的文本会被复制到输入字段中。

应用场景

表单填写：在注册、登录等表单中，可以使用按钮填充常见信息，如“请输入您的邮箱”。
搜索建议：在搜索框旁边放置一个按钮，点击按钮可以填充常见的搜索词汇。
模板填充：在文本编辑器中，可以使用按钮填充常用的文本模板。

示例代码（前端开发）

以下是一个简单的HTML和JavaScript示例，展示如何将按钮文本填充到输入字段中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button Text to Input Field</title>
</head>
<body>
    <input type="text" id="inputField" placeholder="Enter text here">
    <button id="fillButton">Fill Text</button>

    <script>
        document.getElementById('fillButton').addEventListener('click', function() {
            var buttonText = this.textContent;
            document.getElementById('inputField').value = buttonText;
        });
    </script>
</body>
</html>