189 votes

Comment détecter "shift + enter" et générer une nouvelle ligne dans Textarea?

Actuellement, si la personne appuie sur enter à l’intérieur de la zone de texte, la forme soumettra.
Bon, je veux que.

Mais quand ils tapent shift + enter , je veux le textarea pour passer à la ligne suivante : ``

Comment puis-je faire cela `` ou simple JavaScript aussi simple que possible ?

214voto

Tim Down Points 124501

Tout d'abord, en appuyant sur Entrée à l'intérieur d'un textarea ne pas soumettre le formulaire, sauf si vous avez un script pour faire cela. C'est le comportement de l'utilisateur attend et je le recommande à l'égard du changement. Toutefois, si vous devez le faire, l'approche la plus simple serait de trouver le script qui fait Entrer soumettre le formulaire et de le modifier. Le code va avoir quelque chose comme

if (evt.keyCode == 13) {
    form.submit();
}

... et vous pourriez passer à la

if (evt.keyCode == 13 && !evt.shiftKey) {
    form.submit();
}

Si vous n'avez pas accès à ce code pour une raison quelconque, vous devez faire ce qui suit pour le faire fonctionner dans tous les principaux navigateurs, même si le curseur n'est pas à la fin du texte:

jsFiddle: http://jsfiddle.net/zd3gA/1/

Code:

function pasteIntoInput(el, text) {
    el.focus();
    if (typeof el.selectionStart == "number"
            && typeof el.selectionEnd == "number") {
        var val = el.value;
        var selStart = el.selectionStart;
        el.value = val.slice(0, selStart) + text + val.slice(el.selectionEnd);
        el.selectionEnd = el.selectionStart = selStart + text.length;
    } else if (typeof document.selection != "undefined") {
        var textRange = document.selection.createRange();
        textRange.text = text;
        textRange.collapse(false);
        textRange.select();
    }
}

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, which only allows default
// key action to be suppressed in keypress
$("#your_textarea_id").keydown(handleEnter).keypress(handleEnter);

91voto

TheSuperTramp Points 5641

Je pense que vous pouvez faire quelque chose comme ça..

EDIT : Changé le code fonctionne indépendamment de la position du curseur

La première partie du code est d'obtenir la position du curseur.

Ref: Comment obtenir la position du curseur dans le textarea?

function getCaret(el) {
  if (el.selectionStart) {
     return el.selectionStart;
  } else if (document.selection) {
     el.focus();

   var r = document.selection.createRange();
   if (r == null) {
    return 0;
   }

    var re = el.createTextRange(),
    rc = re.duplicate();
    re.moveToBookmark(r.getBookmark());
    rc.setEndPoint('EndToStart', re);

    return rc.text.length;
  }  
  return 0;
}

Puis en remplaçant le textarea de la valeur en conséquence, lorsque Shift + Enter ensemble , de soumettre le formulaire si l' Entrée est pressée seul.

$('textarea').keyup(function (event) {
   if (event.keyCode == 13 && event.shiftKey) {
       var content = this.value;
       var caret = getCaret(this);
       this.value = content.substring(0,caret)+
                     "\n"+content.substring(caret,content.length);
       event.stopPropagation();

  }
 });

Voici une démo

53voto

Matt Goodwin Points 75

La plupart de ces réponses overcomplicate cela. Pourquoi ne pas essayer de cette façon ?

Pas de déconner avec la position du signe insertion ou bousculer la ligne se brise en JS. Fondamentalement, la fonction ne fonctionnera pas si la touche Maj est enfoncée, autorisant ainsi la touche entrée/retour à accomplir sa fonction normale.

21voto

Liam Hall Points 127

Pourquoi ne pas juste

4voto

Thariama Points 26420

Utiliser le plugin jQuery hotkeys et copiez le code suivant

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X