如何在 Discord 中创建一个接受用户输入的弹出窗口？

Question

这是我第一次从 Discord 机器人中看到这个功能。我尝试到处寻找，但似乎失败了。Captcha.bot Discord 机器人提供了此功能，您可以通过 Discord 内的弹出窗口接受输入。

Captcha.bot 制作的嵌入消息中有一个按钮，您必须在其中回答验证码测试。按下按钮后，它会创建一个像这样的弹出窗口。

在验证码机器人上输入正确答案后，以下是体验的后果。

我想学习的是如何使用 Discord.js 召唤弹出窗口（如果可能的话）或者至少了解他们是如何做到的。

Answer 1

这些称为模态，它们将在下一个主要 discord.js 版本 v14 中提供。已经有一个针对此的拉取请求。

2022-07-19 更新：v14.0.0 中的模态框

v14 有一些变化。如果您尝试从 v13.7 更新代码，则会出现一些差异：

• Modal就是现在ModalBuilder
• MessageActionRow就是现在ActionRowBuilder
• TextInputComponent就是现在TextInputBuilder
• 您需要使用诸如TextInputStyle.Short,ButtonStyle.Primary等枚举而不是字符串（即"SHORT", 或"PRIMARY"）
• interaction不再有isModalSubmit类型保护。您需要type根据InteractionType.ModalSubmit枚举检查它

您可以在下面找到可与 Discord.js v14 一起使用的完整代码：

// discord.js version v14.0.0+
const {
  ActionRowBuilder,
  ButtonBuilder,
  ButtonStyle,
  Client,
  Events,
  GatewayIntentBits,
  InteractionType,
  ModalBuilder,
  TextInputBuilder,
  TextInputStyle,
} = require('discord.js');

const TOKEN = 'YOUR TOKEN HERE';
const client = new Client({
  intents: [
    GatewayIntentBits.Guilds,
    GatewayIntentBits.GuildMessages,
  ],
});

client.on(Events.MessageCreate, (message) => {
  if (message.author.bot) return;

  let button = new ActionRowBuilder();
  button.addComponents(
    new ButtonBuilder()
      .setCustomId('verification-button')
      .setStyle(ButtonStyle.Primary)
      .setLabel('Open modal dialog'),
  );
  message.reply({
    components: [button],
  });
});

client.on(Events.InteractionCreate, async (interaction) => {
  if (interaction.isButton()) {
    if (interaction.customId === 'verification-button') {
      const modal = new ModalBuilder()
        .setCustomId('verification-modal')
        .setTitle('Verify yourself')
        .addComponents([
          new ActionRowBuilder().addComponents(
            new TextInputBuilder()
              .setCustomId('verification-input')
              .setLabel('Answer')
              .setStyle(TextInputStyle.Short)
              .setMinLength(4)
              .setMaxLength(12)
              .setPlaceholder('ABCDEF')
              .setRequired(true),
          ),
        ]);

      await interaction.showModal(modal);
    }
  }

  if (interaction.type === InteractionType.ModalSubmit) {
    if (interaction.customId === 'verification-modal') {
      const response =
        interaction.fields.getTextInputValue('verification-input');
      interaction.reply(`Yay, your answer is submitted: "${response}"`);
    }
  }
});

client.once('ready', () => {
  console.log('Bot v14 is connected...');
});

client.login(TOKEN);

上一个答案 2022-06-28：v13.7.0 中的模态框

Modal 自v13.7.0起可用。如果您尝试从 更新代码discord-modals，则会出现一些差异：

• 你需要从discord.jsModal导入TextInputComponent
• TextInputComponents 必须在MessageActionRows内
• 有interaction一个showModal()打开模式的方法
• 有interaction一个isModalSubmit()方法可以检查它是否是ModalSubmitInteraction
• 没有modalSubmit活动
• 获得您需要使用的响应interaction.fields.getTextInputValue()

您可以在下面找到可在 v13.7 中使用的完整代码：

// discord.js version v13.7.0+
const {
  Client,
  Intents,
  MessageActionRow,
  MessageButton,
  Modal,
  TextInputComponent,
} = require('discord.js');

const TOKEN = 'YOUR TOKEN HERE';
const client = new Client({
  intents: [
    Intents.FLAGS.GUILDS,
    Intents.FLAGS.GUILD_MESSAGES],
});

client.on('messageCreate', (message) => {
  if (message.author.bot) return;

  let button = new MessageActionRow();
  button.addComponents(
    new MessageButton()
      .setCustomId('verification-button')
      .setStyle('PRIMARY')
      .setLabel('Open modal dialog'),
  );
  message.reply({
    components: [button],
  });
});

client.on('interactionCreate', async (interaction) => {
  if (interaction.isButton()) {
    if (interaction.customId === 'verification-button') {
      const modal = new Modal()
        .setCustomId('verification-modal')
        .setTitle('Verify yourself')
        .addComponents([
          new MessageActionRow().addComponents(
            new TextInputComponent()
              .setCustomId('verification-input')
              .setLabel('Answer')
              .setStyle('SHORT')
              .setMinLength(4)
              .setMaxLength(12)
              .setPlaceholder('ABCDEF')
              .setRequired(true),
          ),
        ]);

      await interaction.showModal(modal);
    }
  }

  if (interaction.isModalSubmit()) {
    if (interaction.customId === 'verification-modal') {
      const response =
        interaction.fields.getTextInputValue('verification-input');
      interaction.reply(`Yay, your answer is submitted: "${response}"`);
    }
  }
});

client.once('ready', () => {
  console.log('Bot v13 is connected...');
});

client.login(TOKEN);

第一个答案2022-03-30：使用discord-modals包

同时，您可以使用 npm 包，例如discord-modals或discordjs-modal。

您可以在下面的包中找到一个工作示例discord-modals。不要忘记首先使用安装它npm i discord-modals。

// discord-modals
const {
  Client,
  Intents,
  MessageActionRow,
  MessageButton,
} = require('discord.js');
const discordModals = require('discord-modals');
const { Modal, TextInputComponent, showModal } = discordModals;

const TOKEN = 'YOUR TOKEN HERE';
const client = new Client({
  intents: [
    Intents.FLAGS.GUILDS,
    Intents.FLAGS.GUILD_MESSAGES],
});
discordModals(client);

client.on('messageCreate', (message) => {
  if (message.author.bot) return;

  let button = new MessageActionRow();
  button.addComponents(
    new MessageButton()
      .setCustomId('verification-button')
      .setStyle('PRIMARY')
      .setLabel('Open modal dialog'),
  );
  message.reply({
    components: [button],
  });
});

client.on('interactionCreate', async (interaction) => {
  if (interaction.isButton()) {
    if (interaction.customId === 'verification-button') {
      const modal = new Modal() // We create a Modal
        .setCustomId('verification-modal')
        .setTitle('Verify yourself')
        .addComponents([
          new TextInputComponent()
            .setCustomId('verification-input')
            .setLabel('Answer')
            .setStyle('SHORT')
            .setMinLength(4)
            .setMaxLength(12)
            .setPlaceholder('ABCDEF')
            .setRequired(true),
        ]);

      showModal(modal, {
        client,
        interaction,
      });
    }
  }
});

client.on('modalSubmit', async (modal) => {
  if (modal.customId === 'verification-modal') {
    const response = modal.getTextInputValue('verification-input');
    modal.reply(`Yay, your answer is submitted: "${response}"`);
  }
});

client.once('ready', () => {
  console.log('Bot v13 is connected...');
});

client.login(TOKEN);