javascript - 如果 HTML5 表单中的文本框值为 x，则 y : Is that possible?

Question

基本上，我想在文本框中输入某个字符串，并检查它是什么。它基本上是我想要实现的命令系统。有一个小终端弹出窗口，其中有一个文本框等待命令。这是我用来在表单中制作文本框的 HTML:

<form id="command-input">
    <input type="text" placeholder="Enter Command" id="command-box">
    <input type="submit" style="display: none">
</form>

我将提交设置为不可见，以便您可以按 Enter 键并提交表单。这是我正在使用的 JavaScript:

function changeStyle(sheet) {
    document.getElementById('specific-sheet').setAttribute('href', sheet);
}

var command = document.getElementById('command-input');

if(command.value=="windows"){
    changeStyle('../css/windows-xp.css');
}

我想做到如果我在命令框中输入“windows”并按回车键，它将更改我的样式表。这个网站上的人都很聪明，所以我再次寻求帮助。感谢您的贡献!

Answer 1

您需要检查一个事件。假设这是在普通标签中；您可以使用以下内容:

var inputbox = document.getElementById('command-input');

function changeStyle(sheet) {
    document.getElementById('specific-sheet').setAttribute('href', sheet);
}

inputbox.addEventListener('input', function (evt) {
    if (this.value == 'windows'){
       changeStyle('../css/windows-xp.css');
    }
});

编辑:

你也可以这样做。如果您希望输入键触发，请将事件更改为“onsubmit”。

function changeStyle(sheet) {
    document.getElementById('specific-sheet').setAttribute('href', sheet);
}

document.getElementById('command-input').addEventListener(
  'keyup',
  function(eve){
      if (eve.target.value == 'windows'){
       changeStyle('../css/windows-xp.css');
    }

  },
  false
);

如果您想在页面刷新后保留更改，您可能必须将文件路径保留在本地存储中并在 dom load 事件中使用它。

此外，您确实不需要将其包装在表单标记中。您可以使用一个简单的 div，这不是由表单提交触发的。