La etiqueta de área de texto define un control de entrada de texto de varias líneas. El tamaño de un área de texto se puede especificar mediante los atributos cols y rows. Por defecto, cada vez que presionamos «enter» o «shift+enter» se crea una nueva línea en el área de texto. Por lo tanto, para detectar solo «shift + enter» y generar una nueva línea a partir de él, debemos bloquear «enter» para que no genere una nueva línea y redirigirlo para que haga otra cosa, como enviar.
Ejemplo 1: consulte el siguiente ejemplo para el mecanismo «enter» y «shift+enter». Entonces, aquí en el siguiente código, tanto «enter» como «shift+enter» hacen lo mismo. Entonces, todo lo que se debe hacer es bloquear el mecanismo de «ingresar» o redirigirlo para que haga otra cosa.
<!DOCTYPE html>
<html>
<body>
<center>
<h1 style="color:green;">GeeksforGeeks</h1>
<script>
function geeks(event) {
// 13 is the keycode for "enter"
if (event.keyCode == 13 && event.shiftKey) {
document.getElementById("d").innerHTML = "Triggered enter+shift";
}
if (event.keyCode == 13 && !event.shiftKey) {
document.getElementById("d").innerHTML = "Triggered enter";
}
}
</script>
<h4>Press "enter" or "shift+enter" in the textarea, both does the same.</h4>
<textarea rows="8" cols="50" onkeypress="geeks(event)">
GeeksforGeeks A Computer science portal for geeks.
</textarea>
<p id="d" style="color:red"></p>
</center>
</body>
</html>
Producción:
Ejemplo 2: en el siguiente código, creamos una función ( submitForm() ) para enviar el formulario que solo contiene una línea, porque colocamos este document.geek.submit() debajo de event.preventDefault() , document.geek.submit( ) anulará event.preventDefault() y nunca bloqueará el «enter» para que no cree una línea.
<!DOCTYPE html>
<html>
<head>
<script>
function press(event) {
if (event.keyCode == 13 && !event.shiftKey) {
//Stops enter from creating a new line
event.preventDefault();
submitForm();
return true;
}
function submitForm() {
document.geek.submit(); //submits the form.
}
}
</script>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<h4>
Press "enter" to submit and "shift+enter" to generate a new line.
</h4>
<form action="submit.html" name="geek">
<textarea rows="7" cols="30" onkeypress="press(event)"></textarea>
</form>
</center>
</body>
</html>
HTML en enviar.html:
<!DOCTYPE html> <html> <body> <h2 style="color:red">List Submitted.</h2> </body> </html>
Producción: