时间戳

首页 > 解决方案 > 如果 HTML5 形式的文本框值是 x，那么 y: 这可能吗？

javascript - 如果 HTML5 形式的文本框值是 x，那么 y: 这可能吗？

问题描述

所以基本上，我想在文本框中输入某个字符串，然后检查它是什么。它基本上是针对我正在尝试实现的命令系统。有一个小终端弹出窗口，其中有一个文本框等待命令。这是我用来在表单中制作文本框的 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”并按回车键，我想将其更改为我的样式表。这个网站上的人都很聪明，所以我再次寻求帮助。感谢您的贡献！

标签： javascripthtml

解决方案

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


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 加载事件中使用它。

此外，您真的不需要将其包装在表单标签中。您可以使用简单的 div 并且这不会由表单提交触发。

推荐阅读