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

Question

这是我第一次从 Discord 机器人中看到此功能。我试着到处寻找，但似乎我失败了。 Captcha.bot Discord bot 提供了此功能，您可以在其中接受来自 Discord 内弹出窗口的输入。
Captcha.bot 制作的嵌入式消息中有一个按钮，您必须在其中回答验证码测试。按下按钮后，它会创建一个像这样的弹出窗口。

在验证码机器人上放置正确答案后，这是体验的后果。

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

Answer 1

这些被称为模态，它们将在下一个主要的 discord.js 版本 v14 中可用。已经有一个pull request为了这。
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 中的模态
模态自 v13.7.0 起可用.如果您尝试从 discord-modals 更新您的代码，有几点不同:

您需要导入 Modal和 TextInputComponent来自 discord.js

TextInputComponent s 必须在 MessageActionRow 内小号

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包裹
同时，您可以使用像 discord-modals 这样的 npm 包。或 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);