Maison > interface Web > tutoriel CSS > Comment puis-je détecter « Shift Enter » pour insérer une nouvelle ligne dans une zone de texte au lieu de soumettre un formulaire ?

Comment puis-je détecter « Shift Enter » pour insérer une nouvelle ligne dans une zone de texte au lieu de soumettre un formulaire ?

Patricia Arquette
Libérer: 2024-11-30 09:25:13
original
445 Les gens l'ont consulté

How Can I Detect

Détection de « Shift Enter » et insertion d'une nouvelle ligne dans la zone de texte

Par défaut, appuyer sur la touche « Entrée » dans une zone de texte soumet le formulaire. Cependant, vous souhaitez conserver cette fonctionnalité tout en permettant aux utilisateurs de créer une nouvelle ligne en appuyant sur la combinaison de touches « Shift » « Entrée ». Voici comment y parvenir en JavaScript :

Si vous contrôlez le script qui fait que "Entrée" soumet le formulaire, modifiez simplement le code pour vérifier si la touche "Shift" n'est pas enfoncée. Par exemple, changez ceci :

if (evt.keyCode == 13) {
    form.submit();
}
Copier après la connexion

... par ceci :

if (evt.keyCode == 13 && !evt.shiftKey) {
    form.submit();
}
Copier après la connexion

Cependant, si vous n'avez pas accès au code d'origine, vous pouvez utiliser le script suivant pour obtenir le comportement souhaité, même lorsque le curseur n'est pas à la fin du texte :

function handleEnter(evt) {
    if (evt.keyCode == 13 && evt.shiftKey) {
        if (evt.type == "keypress") {
            pasteIntoInput(this, "\n");
        }
        evt.preventDefault();
    }
}

// Handle both keydown and keypress for Opera as it suppresses default key action in keypress
$("#your_textarea_id").keydown(handleEnter).keypress(handleEnter);
Copier après la connexion

Ce script vérifie la combinaison de touches "Shift" "Entrée". Lorsqu'il est détecté, il insère un caractère de nouvelle ligne ("n") dans la zone de texte à l'aide de la fonction pasteIntoInput et empêche la soumission du formulaire par défaut.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal