Question

我有兴趣为我的网站制作命令提示式导航工具。我正在研究JQuery终端插件，但大部分信息都在我脑海中。我只想要一个闪烁的光标出现一些指令。然后，用户可以键入以下内容：主页，联系我们，关于等，并将其带到相应的页面。

我只想输入Home，而不是拥有很多命令，它会将我带到我的主页面。联系我们，它将带我到我的联系页面等。

谢谢

Answer 1

试试这个

HTML

<form id="command-prompt">
    <input type="text"/>
    <input type="submit" value="Go"/>
</form>

的JavaScript

$("#command-prompt input[type='submit']").click(function(event){
    event.preventDefault();
    var value = $("#command-prompt input[type='text']").val();
    window.location.pathname = "/" + value + ".html";
});

例如，如果您尝试在输入中输入about并点击Go，则会转到www.yourdomain.com/about.html

Answer 2

我为你做了这个小提琴：

fiddle

只需用css隐藏输入边框（如果你愿意，可以使用更多的css来设置它的样式）：

input#my_console {
    border: 0;
}
input#my_console:focus {
    outline: 0;
}

使用焦点在输入上使光标闪烁：

$("#my_console").focus();

使用jQuery keyup事件检查返回键是否在输入字段中使用。返回键keyCode是＆＃34; 13＆＃34;。然后将输入字段的值与您需要的关键字进行比较。如果输入的文本与关键字匹配，则使用window.location将用户转发到另一个页面。如果它与您的任何关键字都不匹配，请输出一些错误消息。

$("#my_console").on("keyup", function (e) {
    var code = e.keyCode || e.which;
    var my_input = $("#my_console").val();

    if (code == 13) {
        if (my_input == "home") {
            window.location = "index.html";
        } else if (my_input == "contact") {
            window.location = "contact.html";
        }else{
            $("#my_console").val("unknown keyword");
            $("#my_console").select();
        }
    }
});

HTML命令提示符导航

2 个答案: