Навигация по командной строке HTML

Question

Я заинтересован в создании инструмента навигации в стиле командной строки для моего сайта. Я искал плагин терминала JQuery, но большая часть информации просто идет мне в голову. Я просто хочу, чтобы мигающий курсор появился с некоторыми инструкциями. Затем пользователь может ввести такие вещи, как: Главная страница, Связаться с нами, О нас и т. Д., И перейти на соответствующую страницу.

Примером этого может быть http://ohmycode.fr/

Вместо того, чтобы иметь много команд, я просто хочу напечатать 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";
});

Например, если вы попытаетесь набрать в поле ввода и нажать "Перейти", вы перейдете по адресу www.yourdomain.com/about.html.

Answer 2

Я сделал эту скрипку для тебя:

играть на скрипке

просто скройте границы ввода с помощью css (и используйте больше css для стилизации, если хотите):

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

используйте фокус на вводе, чтобы курсор мигал:

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

использовать JQuery keyup событие, чтобы проверить, использовался ли ключ возврата в вашем поле ввода. ключ возврата keyCode это "13". затем сравните значение поля ввода с требуемыми ключевыми словами. использование 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();
        }
    }
});