如何设置textarea触发JavaScript if语句的指定关键词/密码

问题说明 #

需求：用户在textarea发送的消息中包含指定关键词（如不区分大小写的"Mellon"）时，才触发JoinedInTheRoom函数；无关键词则仅显示玩家消息，不执行其他操作。
现有问题：任何内容甚至单个字符、空消息都会触发函数，textarea的required属性仅首次提交有效。

解决方案 #

核心修改点：

• 合并重复的表单提交事件监听，避免逻辑冲突
• 添加不区分大小写的关键词检测逻辑
• 修复空输入判断，过滤纯空格内容
• 仅在关键词匹配时调用JoinedInTheRoom

修改后的完整代码 #

HTML 代码（无需改动）

<!-- CHAT LOG -->
<h3>Chat Log</h3>
<div class="ChatLog">

  <div class="msg left-msg">
    <div class="msg-img" style="background-image: url()"></div>
    <div class="msg-bubble">
      <div class="msg-info">
        <div class="msg-info-name">System</div>
      </div>
      <div class="msg-text">Write the Keyword to join the room and unlock the NPCs and Quests</div>
    </div>
  </div>

</div>

<!-- TEXT AREA AND BUTTON -->
<form class="FormInputArea">
  <textarea class="InputCamp" id="TextArea" placeholder="Explain your move in max 200 characters..." required></textarea>
  <button class="button" type="submit" id="SendButton"> Send </button>
</form>

JavaScript 代码

// 全局变量（需自行补充头像URL等信息）
const BOT_NAME = "NPC";
const BOT_IMG = "你的NPC头像地址";
const PERSON_NAME = "玩家";
const PERSON_IMG = "你的玩家头像地址";

// 工具函数：格式化时间
function formatDate(date) {
  return date.toLocaleTimeString(); // 可根据需求自定义格式
}

// DOM 元素获取
const ChatLog = document.querySelector(".ChatLog");
const FormInputArea = document.querySelector(".FormInputArea");
const InputCamp = document.querySelector(".InputCamp");

// 追加玩家消息函数
function AppendMessage(name, img, side, text) {
  const msgHTML = `
    <div class="msg ${side}-msg">
      <div class="msg-img" style="background-image: url(${img})"></div>
      <div class="msg-bubble">
        <div class="msg-info">
          <div class="msg-info-name">${name}</div>
          <div class="msg-info-time">${formatDate(new Date())}</div>
        </div>
        <div class="msg-text">${text}</div>
      </div>
    </div>
  `;
  ChatLog.insertAdjacentHTML("beforeend", msgHTML);
  ChatLog.scrollTop = ChatLog.scrollHeight; // 自动滚动到最新消息底部
}

// 加入房间并解锁NPC函数
function JoinedInTheRoom(side) {
  const NpcsUnlocked = `
    <div class="msg ${side}-msg">
      <div class="msg-img" style="background-image: url(${BOT_IMG})"></div>
      <div class="msg-bubble">
        <div class="msg-info">
          <div class="msg-info-name">${BOT_NAME}</div>
          <div class="msg-info-time">${formatDate(new Date())}</div>
        </div>
        <div class="msg-text">You've joined the room, feel free to choose your quest.</div>
      </div>
    </div>
    <div class="msg ${side}-msg">
      <div class="msg-img" style="background-image: url(${BOT_IMG})"></div>
      <div class="msg-bubble">
        <div class="msg-info">
          <div class="msg-info-name">${BOT_NAME}</div>
          <div class="msg-info-time">${formatDate(new Date())}</div>
        </div>
        <div class="msg-text">
          <p onclick="Npc1('RANDOM TASK DESCRIPTION 1')"> Npc 1. </p>
          <p onclick="Npc2('RANDOM TASK DESCRIPTION 2')"> Npc 2. </p>
        </div>
      </div>
    </div>
  `;
  ChatLog.insertAdjacentHTML("beforeend", NpcsUnlocked);
  ChatLog.scrollTop = ChatLog.scrollHeight;
}

// 表单提交事件（合并为单一监听，避免逻辑冲突）
FormInputArea.addEventListener("submit", event => {
  event.preventDefault();
  
  const inputText = InputCamp.value.trim(); // 过滤前后空格，避免纯空输入
  if (!inputText) return; // 空输入直接终止流程
  
  // 先显示玩家发送的消息
  AppendMessage(PERSON_NAME, PERSON_IMG, "right", inputText);
  InputCamp.value = "";
  
  // 关键词检测（不区分大小写）
  const TARGET_KEYWORD = "mellon"; // 统一转小写，简化匹配逻辑
  if (inputText.toLowerCase().includes(TARGET_KEYWORD)) {
    // 模拟NPC回复延迟，按单词数计算
    const delay = inputText.split(" ").length * 600;
    setTimeout(() => {
      JoinedInTheRoom("left");
    }, delay);
  }
});

// 补充NPC任务触发函数（需自行完善逻辑）
function Npc1(task) {
  console.log("接受NPC1任务：", task);
}

function Npc2(task) {
  console.log("接受NPC2任务：", task);
}

修改说明 #

1. 合并事件监听：原代码存在两个独立的submit监听，导致无论输入内容都会执行所有逻辑，现在合并为一个监听，先处理玩家消息，再判断关键词。
2. 关键词匹配：用toLowerCase()统一转换输入内容和关键词的大小写，配合includes()检测包含关系，比旧的indexOf()写法更直观易懂。
3. 空输入处理：通过trim()过滤输入内容的前后空格，避免用户输入纯空格时触发逻辑，解决required属性仅首次生效的问题。
4. 滚动优化：将固定数值滚动改为ChatLog.scrollTop = ChatLog.scrollHeight，确保每次发送消息后都自动滚动到最新内容底部。

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