如何用HTML和JavaScript实现输入关键词触发指定功能的输入框

原有代码问题整理 #

• document.getElementById()的入参需要是字符串类型，你原有代码中inputId_1没有加引号，会被JS识别为未定义的变量，导致获取DOM失败
• 给DOM元素设置显示内容时，需要指定textContent/innerHTML属性，不能直接对DOM对象赋值
• getInputValue函数缺少闭合的右大括号}，会报语法错误
• <input>是HTML自闭合标签，不需要额外写</input>结束标签

点击按钮触发检测版本 #

该版本和你的原有逻辑一致，点击按钮后才会校验输入内容是否匹配关键词：

<form>
  <input type="text" placeholder="输入内容" id="inputId_1">
  <button type="button" onclick="getInputValue();">触发检测</button>
</form>
<p id="iftest">Hello</p>

<script>
function getInputValue() {
  // 获取输入框内容
  let inputVal = document.getElementById('inputId_1').value;
  // 匹配指定关键词，可自行修改关键词或者新增匹配分支
  if (inputVal === "k") {
    document.getElementById("iftest").textContent = "已匹配关键词k，触发预设逻辑";
    // 此处调用你自己的预设函数即可
    // yourCustomFunction()
  } else if (inputVal === "x") {
    document.getElementById("iftest").textContent = "已匹配关键词x，触发预设逻辑";
  }
}
</script>

实时输入触发检测版本 #

该版本不需要点击按钮，输入内容的过程中会实时校验，匹配到关键词立刻触发逻辑：

<form>
  <!-- 绑定input事件，每次输入都会触发校验 -->
  <input type="text" placeholder="输入内容" id="inputId_1" oninput="checkKeyword()">
</form>
<p id="iftest">Hello</p>

<script>
function checkKeyword() {
  let inputVal = document.getElementById('inputId_1').value.trim();
  if (inputVal === "x") {
    document.getElementById("iftest").textContent = "检测到关键词x，触发预设函数";
    // 调用你的预设函数
    // yourTargetFunction()
  } else if (inputVal === "k") {
    document.getElementById("iftest").textContent = "检测到关键词k，触发预设函数";
  } else {
    document.getElementById("iftest").textContent = "未匹配到指定关键词";
  }
}
</script>

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