jak zapobiec domyślnemu naciśnięciu klawisza dla określonego zdarzenia, a następnie przywrócić domyślne ustawienie ponownie

Question

Pracuję nad czymś, co wymaga użycia spacji, aby wywołać zdarzenie. To, nad czym pracuję, jest znacznie bardziej złożone, ale uprościłem je do podstaw, jako przykład tego, co musiałem zrobić.

Chodzi o to, że kiedy spacja jest przytrzymana, podświetla ten element div i gdy jest puszczony, un-highlights. Miałem problem z tym, że kiedy naciskałem spację, domyślnie ustawiałem przesuwanie paska w dół etapami. Aby sobie z tym poradzić, próbowałem dodać domyślne zabezpieczenie, a następnie skończyłem używając return false.

To było wspaniałe ... dopóki nie zdałem sobie sprawy, że kiedy testowałem wpisywanie w pola tekstowe pola wejściowego, odebrałem sobie możliwość wstawienia spacji podczas pisania.

Co myślę, że potrzebne jest albo:

• Do (aś) Zapobiegaj domyślne lub return false jakoś mam po zakończeniu pracy, chociaż nie mogłem zorientować się, jak to zrobić, ponieważ Potrzebowałem tej funkcji, aby była dostępna na całej stronie.
• Zatrzymaj spację, aby przewinąć stronę w dół po przytrzymaniu, ale nadal pozostawiasz spację podczas pisania tekstu.

Naprawdę nie jestem pewien, jak to zrobić.

Oto kod używam do tego przykładu:

HTML

<div class="container"> 
    <div class="moo">I am moo</div> 
    <input/> 
</div> 

CSS:

.container { 
    height:9000px; 
} 
.moo { 
    border:1px solid black 
} 
.red { 
    background:red; 
} 
input { 
    margin-top:30px; 
} 

SCENARIUSZ:

$(document).keydown(function(e) { 
    if(e.keyCode === 32) { 
     $('.moo').addClass('red'); 
     //event.preventDefault(); 
     //event.stopPropagation(); 
     return false; 
    } 
    else { 
     $('.moo').removeClass('moo'); 
    } 
}); 
$(document).keyup(function(e) { 
    if(e.keyCode === 32) { 
     $('.moo').removeClass('red'); 
     event.stopPropagation(); 
    } 
}); 

DEMO HERE

Answer 1

DEMO

Przechwyć keypress wydarzenie zamiast tego i toggleClassred a ty Można sprawdzić, czy element docelowy jest body lub input element użyciu e.target.nodeName

$(document).keypress(function(e) { 
    if(e.keyCode === 32 && e.target.nodeName=='BODY') { 
     $('.moo').toggleClass('red'); 
     event.preventDefault(); //prevent default if it is body 
    } 
}); 

Albo jeśli chcesz zachować migać na keyup i keydown prostu zachować zarówno wydarzenia, jak poniżej:

$(document).keydown(function(e) { 
    if(e.keyCode === 32 && e.target.nodeName=='BODY') { 
     $('.moo').toggleClass('red'); 
     event.preventDefault(); 
    } 
}); 
$(document).keyup(function(e) { 
    if(e.keyCode === 32 && e.target.nodeName=='BODY') { 
     $('.moo').toggleClass('red'); 
     event.preventDefault(); 
    } 
}); 

DEMO

Answer 2

Sprawdź e.target, który mówi, co element DOM został skupiony, gdy aktywowano zdarzenia keydown/keyup. Nie wyłączyć obsługę domyślnej przypadku, jeśli cel jest typu textarea lub input

Answer 3

ten sposób byłoby to zrobić:

$("input").keydown(function(e) { 
    if(e.keyCode === 32) { 
     $(this).val($(this).val()+ " "); 
    } 
}); 

Here is the JSFiddle demo