如何在Google Apps Script开发的Gmail插件中实现textarea输入？

嘿，我懂你想要在Gmail插件里加个类似textarea的多行输入框的需求——其实Card Service里没有直接叫textarea的组件，但咱们可以用TextInput来模拟这个功能，官方文档里藏了这个小设置，我之前也踩过这个坑，现在给你一步步讲清楚：

核心实现思路 #

Card Service的TextInput组件支持通过setMultiline(true)方法开启多行输入模式，开启后它就会变成一个可换行的输入框，完全能满足textarea的需求，还支持设置行数、占位文本这些属性。

完整代码示例 #

下面是一个简单的示例，展示如何创建带多行输入框的Gmail插件卡片：

function buildAddon() {
  // 创建多行输入框
  const multiLineInput = CardService.newTextInput()
    .setFieldName("user_note") // 用于后续获取输入值的标识
    .setTitle("请输入备注") // 输入框标题
    .setPlaceholder("在这里输入多行内容...") // 占位提示文本
    .setMultiline(true) // 开启多行模式
    .setNumberOfLines(5); // 设置默认显示的行数（可选）

  // 创建提交按钮
  const submitButton = CardService.newTextButton()
    .setText("提交")
    .setOnClickAction(CardService.newAction()
      .setFunctionName("handleSubmit")); // 点击后触发的回调函数

  // 组装卡片
  const section = CardService.newCardSection()
    .addWidget(multiLineInput)
    .addWidget(submitButton);

  const card = CardService.newCardBuilder()
    .setHeader(CardService.newCardHeader().setTitle("多行输入示例"))
    .addSection(section)
    .build();

  return [card];
}

// 处理提交的回调函数
function handleSubmit(event) {
  // 获取输入框的值
  const userInput = event.commonEventObject.formInputs.user_note.stringInputs.value[0];
  
  // 这里可以添加你的业务逻辑，比如保存到谷歌表格、发送邮件等
  console.log("用户输入的内容：", userInput);
  
  // 返回提示卡片
  const messageCard = CardService.newCardBuilder()
    .setHeader(CardService.newCardHeader().setTitle("提交成功"))
    .addSection(CardService.newCardSection()
      .addWidget(CardService.newTextParagraph().setText(`你输入的内容是：\n${userInput}`)))
    .build();
  
  return CardService.newActionResponseBuilder()
    .setNotification(CardService.newNotification().setText("内容已提交"))
    .addCard(messageCard)
    .build();
}

关键细节说明 #

• setFieldName()：这个属性很重要，是后续在回调函数里获取输入值的唯一标识，一定要设置。
• setNumberOfLines()：可以控制输入框默认显示的行数，用户还可以手动拖动调整高度。
• 获取输入值：在回调函数里通过event.commonEventObject.formInputs[你的fieldName].stringInputs.value[0]来获取，因为多行输入的返回值是数组形式，取第一个元素就是完整的输入内容。

这样设置后，你的Gmail插件里就会出现一个和textarea功能一样的多行输入框啦！

内容的提问来源于stack exchange，提问作者Robert