come prevenire default su keypress per determinati eventi ma poi riportare di nuovo il valore predefinito

Question

Ho lavorato su qualcosa che mi richiede di utilizzare la barra spaziatrice per attivare un evento. La cosa su cui ho lavorato è molto più complessa, ma l'ho semplificata fino alle basi come esempio di ciò che dovevo fare.

L'idea è che quando si tiene premuta la barra spaziatrice si evidenzia questo div e quando viene lasciato andare non evidenzia. Ho avuto un problema che quando premevo lo spazio, l'impostazione predefinita era di far saltare la barra di scorrimento gradualmente. Per far fronte a questo ho provato ad aggiungere prevenire default e poi ho finito con return false.

Questo è stato fantastico ... fino a quando ho capito che quando stavo testando la digitazione nelle caselle di testo del campo di input avevo tolto la mia capacità di mettere uno spazio durante la digitazione.

Quello che penso quello che serve è uno:

• A (annullare) la impedire di default o return false in qualche modo dopo che ho finito di usarlo, anche se non riuscivo a capire come fare questo perché Avevo bisogno che questa funzione fosse disponibile su tutta la pagina.
• Arresta la barra spaziatrice dal far scorrere la pagina verso il basso quando viene trattenuta ma conserva ancora la possibilità di aggiungere spazi durante la digitazione del testo.

Davvero non so come farlo.

Ecco il codice che sto usando per questo esempio:

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; 
} 

SCRIPT:

$(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

Cattura evento keypress invece e toggleClassred e tu può verificare se l'item obiettivo è body o input element usando 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 
    } 
}); 

Oppure, se si vuole mantenere un batter sul keyup e keydown solo mantenere entrambi gli eventi, come di seguito:

$(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

Controllare lo e.target che indica quale elemento DOM è stato focalizzato quando sono stati attivati ​​gli eventi keydown/keyup. Non disattivare la gestione predefinita della manifestazione, se l'obiettivo è di tipo textarea o input

Answer 3

Ecco come lo farei:

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

Here is the JSFiddle demo