Maison >interface Web >tutoriel CSS >Comment détecter « Shift Enter » et créer de nouvelles lignes dans une zone de texte à l'aide de jQuery ou JavaScript ?

Comment détecter « Shift Enter » et créer de nouvelles lignes dans une zone de texte à l'aide de jQuery ou JavaScript ?

Linda Hamilton
Linda Hamiltonoriginal
2024-12-06 01:51:09369parcourir

How to Detect

Détection de "Shift Enter" et génération de nouvelles lignes dans une zone de texte avec jQuery

Dans les formulaires Web, appuyer sur "Entrée" dans une zone de texte soumet généralement la forme. Cependant, vous souhaiterez peut-être implémenter un comportement différent, comme créer une nouvelle ligne lorsque vous appuyez sur "Shift Enter".

Solution jQuery

$("#textarea_id").on("keydown", function(evt) {
  if (evt.keyCode == 13 && evt.shiftKey) {
    // Insert a newline character
    if (evt.type == "keypress") {
      pasteIntoInput(this, "\n");
    }
    // Prevent form submission
    evt.preventDefault();
  }
});

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

Solution JavaScript simple

var textarea = document.querySelector("#textarea_id");

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

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!

Déclaration:
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