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"