Question

我目前正在实施类似于Designspiration的搜索。当您浏览网站并按任意键时，搜索字段会显示，其中您的密钥已在其中。

我已经实现了这一步，但是无法弄清楚如何进行任何击键。以下是我到目前为止所做的事情，当点击按钮时会出现全屏搜索。

Jquery的

var maxDOP = (int) nudConcurrentFiles.Value; //on UI thread

P.ForEach(..., () => { use maxDop here }); //in Task

HTML

$(function () {
    $('a[href="#search"]').on('click', function(event) {
        event.preventDefault();
        $('#search').addClass('open');
        $('#search > .search-container > form > input[type="search"]').focus();
    });

    $('#search, .search-container, #search button.close').on('click keyup', function(event) {
        if (event.target == this || event.target.className == 'close' || event.keyCode == 27) {
            $(this).removeClass('open');
        }
    });  
});

我如何开始实施搜索，所以当用户刚开始在网站上打字时，会出现搜索框并且用户开始在其中输入内容？

任何帮助都会很棒。

Answer 1

这是怎么回事？的 DEMO

$('#searchPage').fadeOut(0); var isTypingInput=false, isSearching=false; $('input').not('#theSearch').focus(function(){ isTypingInput=true; }); $('input').not('#theSearch').blur(function(){ isTypingInput=false; }); $(document).on('keyup',function(e){ if(!isTypingInput && !isSearching){ if(/([a-zA-Z0-9])+/.test(String.fromCharCode(e.which))){ $('#searchPage').fadeIn(200); $('#theSearch').focus().val(String.fromCharCode(e.keyCode)); isSearching=true; } } }); $('#searchPage').click(function(e){ if($('#theSearch').is(e.target)) return false; $('#searchPage').fadeOut(200); isSearching=false; });

您会看到如果您在页面上的输入内输入内容，则不会显示搜索结果。

您也可以通过点击搜索输入以外的其他位置来关闭搜索页面。

Answer 2

http://jsfiddle.net/rblakeley/8utrsfgp/

的jQuery

$(function () {
    var $field = $('.search-container input'),
        character;

    $(window).on('keyup', function (event) {
        if ($(event.target).is('input, textarea')) return;
        character = String.fromCharCode(event.keyCode);

        if (!$field.val().length) {
            $field.focus().val(character);
        }
    });

});

这不是防弹，但它是一个起点。

按任意键时显示搜索

2 个答案:

的jQuery