关键字触发功能的输入框

Question

如果我在这个输入框中输入“x”，我该如何编写一个触发特定功能的输入框？（我正在使用 HTML 和 JavaScript）

这是我试过的代码：

<form>
<input type="text" placeholder="Type " id="inputId_1"></input>

<button type="button" onclick="getInputValue();">Get Value</button>
</form>

<script>
function getInputValue() {
      let an = document.getElementById(inputId_1).value;
    
     if (an == "k") {
    document.getElementById("iftest") = "zero was entered";
}
</script>
<p id ="iftest">Hello</p>

Answer 1

您可以针对此特定场景使用 keyup 或 keydown 事件监听器：

function handleKeyUp(event) {
  if (event.key.toLowerCase() == "x") {
    console.log("x typed")
  }
}

<input onkeyup="handleKeyUp(event)">

Answer 2

一种允许 自定义匹配值 的通用方法引入了一种可重用组件，该组件由其特定 custom data- attribute and initialized via querySelectorAll and/or querySelector.

初始化过程非常基本，通过向每个已识别的输入元素添加通用实现的 handler function via addEventListener 来处理组件的事件处理。

低级通用处理程序被任何 input value change and derives all necessary data from the passed event object.

触发

输入元素的 value 值和输入元素 dataset will be toLowerCased before trying to figure out whether they match partially or not via value.includes(match) 的 match 值。

在这两种情况下，都将使用相关的 HTML output 元素，在前一种情况下，会呈现错误特定消息，在后一种情况下，将清除输出。

function handleTextInputMatch(evt) {
  const elmInput = evt.currentTarget;
  const elmOutput = elmInput.parentNode.querySelector('output');

  const value = elmInput.value.toLowerCase();
  const match = elmInput.dataset.match.toLowerCase();

  if (value.includes(match)) {

    elmOutput.textContent = elmInput.dataset.matchOutput;
  } else {
    elmOutput.textContent = '';
  }
}

function initialize() {
  document
    .querySelectorAll('[data-text-input-match] [data-match]')
    .forEach(elmInput =>
      elmInput.addEventListener('input', handleTextInputMatch)
    );
}

initialize();

output { color: #c00; }

<form>
  <fieldset data-text-input-match>
    <legend>
      no "XXX" in any case
    </legend>
    <input
      type="text"
      data-match="xxx"
      data-match-output="partially invalid input value"
    />
    <output></output>
  </fieldset>

  <fieldset data-text-input-match>
    <legend>
      no "Foo" in any case
    </legend>
    <input
      type="text"
      data-match="FOO"
      data-match-output="invalid character sequence"
    />
    <output></output>
  </fieldset>
</form>

关键字触发功能的输入框

Input box that triggers function on keyword

javascript

inputbox