Empêcher BACKSPACE de naviguer en arrière avec jQuery (comme la page D'accueil de Google)
avis alors que sur la page d'accueil de Google, sans se concentrer sur aucun élément, en appuyant sur BACKSPACE mettra l'accent dans la barre d'outils de recherche au lieu de naviguer en arrière.
Comment puis-je accomplir?
je continue à rencontrer ce problème avec les utilisateurs de mon application. Ils ne se concentrent sur aucun élément et frappent BACKSPACE qui les jette hors de l'application.
9 réponses
Je lierais un gestionnaire d'événements à keydown et empêcherais l'action par défaut de cet événement si nous avons affaire à la touche backspace en dehors d'un textarea ou input :
$(document).on("keydown", function (e) {
if (e.which === 8 && !$(e.target).is("input, textarea")) {
e.preventDefault();
}
});
j'aime vraiment la réponse D'Andrew Whitaker. Il va, cependant, toujours naviguer en arrière lorsqu'il est concentré sur une lecture, radio, ou case à cocher champ d'entrée et ne permettra pas backspace sur les éléments contentEditable si j'ai ajouté une légère modification. Le mérite revient à Andrew Whitaker.
$(document).on("keydown", function (e) {
if (e.which === 8 && !$(e.target).is("input:not([readonly]):not([type=radio]):not([type=checkbox]), textarea, [contentEditable], [contentEditable=true]")) {
e.preventDefault();
}
});
pour le moment il semble nécessaire d'avoir toutes les variations [contentEditable] qui sont dans le HTML depuis [contentEditable] != [contentEditable = true].
la façon dont Google fait ça est plutôt cool. Lorsque vous appuyez sur backspace, ils concentrent le champ de texte, empêchant les utilisateurs de naviguer en arrière!
vous pouvez essayer la même chose:
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<input id="target" type="text" />
<script type="text/javascript">
$(document).keydown(function(e) { if (e.keyCode == 8) $('#target').focus(); });
</script>
Pour arrêter de naviguer simplement ce code fonctionne!
$(document).on("keydown", function (event) {
if (event.keyCode === 8) {
event.preventDefault();
}
});
mais cela se produira même pour les champs d'entrée de type text/textarea. Afin de limiter les champs, vous pouvez utiliser
$(document).on("keydown", function (event) {
if (event.which === 8 && !$(event.target).is("input, textarea")) {
event.preventDefault();
}
});
dans mon cas où j'avais un champ de texte pour calendar et chaque fois que je cliquais sur ce calendrier, sélectionnez date et appuyez sur backspace il naviguait de retour à la page précédente. Pour l'empêcher pour ce champ seulement j'ai simplement utilisé
$('#myField').on("keydown", function (event) {
if (event.keyCode === 8 || event.which === 8) {
event.preventDefault();
}
});
j'ai pensé à mentionner pour certains pour aider ;-)
Voici une solution simple Testée sur IE, Chrome et Firefox.
$(document).on("keydown", function (event) {
// Chrome & Firefox || Internet Explorer
if (document.activeElement === document.body || document.activeElement === document.body.parentElement) {
// SPACE (32) o BACKSPACE (8)
if (event.keyCode === 32 || event.keyCode === 8) {
event.preventDefault();
}
}});
c'est ancien, mais ces réponses vous permettront quand même de revenir en arrière et de naviguer lorsque vous êtes concentré sur un bouton radio. Vous souhaitez filtrer le type d'entrée. Crédit à toutes les réponses ci-dessus pour ceci:
$(document).on("keydown", function (e) {
if (e.which === 8 && !$(e.target).is("input[type='text']:not([readonly]), textarea")) {
e.preventDefault();
}
});
j'ai tryed beaucoup des morceaux de code sur internet sans résultat satisfaisant. Les nouvelles versions de navigateur de IE (IE11) et Crome cassé mon ancienne solution, mais voici ce qui fonctionne pour moi avec IE11 + Crome + Firefox. Le code empêche le retour en arrière et l'utilisateur ne perd rien de ce qu'il a saisi dans un champ de texte:
window.addEventListener('keydown', function (e) {
if (e.keyIdentifier === 'U+0008' || e.keyIdentifier === 'Backspace' || e.keyCode === '8' || document.activeElement !== 'text') {
if (e.target === document.body) {
e.preventDefault();
}
}
}, true);
pour Internet Explorer, cela a fonctionné pour moi:
de la fenêtre.la méthode addEventListener('bas', function (e) {
if (e.keyCode === 8) {
if (e.target === document.body) {
e.preventDefault();
}
}
}, true);
Gérée readonly zones de texte aussi
$(document).keydown(function (e) {
var activeInput = $(document.activeElement).is("input[type=text]:not([readonly]):focus, textarea:focus");
if (e.keyCode === 8 && !activeInput) {
return false;
};
});