w3schools remove change javascript jquery html css

javascript - remove - this jquery



¿Cómo puedo detectar "shift+enter" y generar una nueva línea en Textarea? (9)

¿Por qué no solo

$(".commentArea").keypress(function(e) { var textVal = $(this).val(); if(e.which == 13 && e.shiftKey) { } else if (e.which == 13) { e.preventDefault(); //Stops enter from creating a new line this.form.submit(); //or ajax submit } });

Actualmente, si la persona presiona ingresar dentro del área de texto, se enviará el formulario.
Bien, quiero eso.

Pero cuando escriben shift + enter , quiero que el área de texto se mueva a la siguiente línea: /n

¿Cómo puedo hacer eso en JQuery o JavaScript simple lo más simple posible?


Aquí hay una solución AngularJS que usa ng-keyup si alguien tiene el mismo problema al usar AngularJS.

ng-keyup="$event.keyCode == 13 && !$event.shiftKey && myFunc()"


Creo que puedes hacer algo como esto ...

EDITAR: Cambió el código para que funcione independientemente de la posición de intercalación

La primera parte del código es obtener la posición de intercalación.

Ref .: posición de Caret en textarea, en caracteres desde el principio

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

Y luego reemplazando el valor de la zona de texto de acuerdo con Mayús + Entrar juntos, envíe el formulario si se presiona Enter solo.

$(''textarea'').keyup(function (event) { if (event.keyCode == 13) { var content = this.value; var caret = getCaret(this); if(event.shiftKey){ this.value = content.substring(0, caret - 1) + "/n" + content.substring(caret, content.length); event.stopPropagation(); } else { this.value = content.substring(0, caret - 1) + content.substring(caret, content.length); $(''form'').submit(); } } });

Aquí hay una demo


En caso de que alguien todavía se esté preguntando cómo hacerlo sin jQuery.

HTML

<textarea id="description"></textarea>

Javascript

const textarea = document.getElementById(''description''); textarea.addEventListener(''keypress'', (e) => { e.keyCode === 13 && !e.shiftKey && e.preventDefault(); })

Vanilla JS

var textarea = document.getElementById(''description''); textarea.addEventListener(''keypress'', function(e) { if(e.keyCode === 13 && !e.shiftKey) { e.preventDefault(); } })


Encontré este hilo buscando una forma de controlar Shift + cualquier tecla. Pegué otras soluciones para hacer esta función combinada para lograr lo que necesitaba. Espero que ayude a alguien más.

function () { return this.each(function () { $(this).keydown(function (e) { var key = e.charCode || e.keyCode || 0; // Shift + anything is not desired if (e.shiftKey) { return false; } // allow backspace, tab, delete, enter, arrows, numbers //and keypad numbers ONLY // home, end, period, and numpad decimal return ( key == 8 || key == 9 || key == 13 || key == 46 || key == 110 || key == 190 || (key >= 35 && key <= 40) || (key >= 48 && key <= 57) || (key >= 96 && key <= 105)); }); });


La mayoría de estas respuestas complican esto. ¿Por qué no intentarlo de esta manera?

$("textarea").keypress(function(event) { if (event.keyCode == 13 && !event.shiftKey) { submitForm(); //Submit your form here return false; } });

Sin perder el tiempo con la posición de intercalación o con los saltos de línea en JS. Básicamente, la función no se ejecutará si se presiona la tecla Mayús y, por lo tanto, permite que la tecla Enter / Return realice su función normal.


Primero, presionar Enter dentro de un área de texto no envía el formulario a menos que tenga un script para hacerlo. Ese es el comportamiento que el usuario espera y yo recomendaría no cambiarlo. Sin embargo, si debe hacer esto, el enfoque más fácil sería encontrar el script que hace que Enter envíe el formulario y lo cambie. El código tendrá algo así como

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

... y podrías cambiarlo a

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

Si no tiene acceso a este código por algún motivo, debe hacer lo siguiente para que funcione en todos los principales navegadores, incluso si el símbolo de intercalación no se encuentra al final del texto:

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

Código:

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


Use el complemento jQuery de teclas rápidas y este código

jQuery(document).bind(''keydown'', ''shift+enter'', function (evt){ $(''textarea'').val($(''#textarea'').val() + "/n");// use the right id here return true; } );


usando la directiva ng-keyup en angularJS, solo envíe un mensaje al presionar la tecla Enter y Shift+Enter simplemente tomará una nueva línea.

ng-keyup="($event.keyCode == 13&&!$event.shiftKey) ? sendMessage() : null"