Cree un área de texto y la tarea es cambiar su tamaño automáticamente cuando escribimos o pegamos el contenido en él. Se puede lograr usando JavaScript y jQuery.
Método 1: Usando JavaScript: Para cambiar la altura, se crea una nueva función que cambia la propiedad de estilo del área de texto. La altura del área de texto se establece primero en auto . Este valor hace que el navegador establezca la altura de un elemento automáticamente. Esto hará que el texto se pueda desplazar ya que la altura del área de texto es menor que el texto. Inmediatamente en la línea siguiente, la altura se vuelve a establecer igual a la de scrollHeight.
La propiedad scrollHeight se usa para devolver la altura completa de un elemento, incluido el relleno en píxeles. Esto hará que la altura del área de texto sea igual a la altura de toda el área de texto, cambiando efectivamente el tamaño del área de texto para que se ajuste al texto.
El evento ‘input’ se activa cada vez que cambia el valor de una entrada o un área de texto. Este evento se puede detectar utilizando el método addEventListener() . La función de devolución de llamada de este método se establece en la nueva función creada anteriormente. Esto hará que el área de texto cambie de tamaño cada vez que se detecte cualquier entrada de texto, por lo tanto, cambiará el tamaño automáticamente de acuerdo con el texto que se escribe o pega.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to create auto-resize textarea
using JavaScript/jQuery?
</title>
<style>
#autoresizing {
display: block;
overflow: hidden;
resize: none;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
Creating a textarea with
auto-resize in JavaScript
</b>
<p>
The textarea below will resize
automatically accounting for
cut, paste and typing text.
</p>
<textarea id="autoresizing">
Try cutting, pasting
or typing here
</textarea>
<script type="text/javascript">
textarea = document.querySelector("#autoresizing");
textarea.addEventListener('input', autoResize, false);
function autoResize() {
this.style.height = 'auto';
this.style.height = this.scrollHeight + 'px';
}
</script>
</body>
</html>
Producción:
- Antes de escribir cualquier texto:
- Después de escribir el texto:
Método 2: Usando jQuery: Es similar al método usado arriba. El método on() en jQuery se usa para adjuntar un controlador de eventos a cualquier elemento. El área de texto se selecciona primero y este método se usa para aplicar un controlador de eventos en el elemento seleccionado.
Se declara una nueva función en la devolución de llamada que cambia la propiedad de estilo del área de texto. La altura del área de texto primero se establece en ‘auto’ y luego, inmediatamente en la siguiente línea, la altura se establece nuevamente igual a la de scrollHeight .
Esto hará que la altura del área de texto sea igual a la altura de toda el área de texto, redimensionando efectivamente el área de texto para que se ajuste al texto. Esta función se ejecutaría siempre que se detecte un cambio en la entrada y el área de texto parecería cambiar de tamaño automáticamente.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to create auto-resize textarea
using JavaScript/jQuery?
</title>
<script src=
"https://code.jquery.com/jquery-3.4.1.min.js">
</script>
<style>
#autoresizing {
display: block;
overflow: hidden;
resize: none;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
Creating a textarea with
auto-resize in JavaScript
</b>
<p>
The textarea below will resize
automatically accounting for cut,
paste and typing text.
</p>
<textarea id="autoresizing">
Try cutting, pasting or typing here
</textarea>
<script type="text/javascript">
$('#autoresizing').on('input', function () {
this.style.height = 'auto';
this.style.height =
(this.scrollHeight) + 'px';
});
</script>
</body>
</html>
Producción:
- Antes de escribir cualquier texto:
- Después de escribir el texto:
jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA