javascript - para - textarea html propiedades
Textarea para cambiar el tamaño en función de la longitud del contenido (9)
Esta pregunta ya tiene una respuesta aquí:
- Creando un área de texto con auto-cambio de tamaño 33 respuestas
Necesito un área de texto donde escribo mi texto en el cuadro, crece en longitud según sea necesario para evitar tener que lidiar con las barras de desplazamiento y tiene que reducirse después de eliminar el texto. No quería bajar por la ruta mootools o jquery porque tengo una forma ligera.
Decida un ancho y verifique cuántos caracteres puede contener una línea, y luego, para cada tecla presionada, llame una función que se asemeje a:
function changeHeight()
{
var chars_per_row = 100;
var pixles_per_row = 16;
this.style.height = Math.round((this.value.length / chars_per_row) * pixles_per_row) + ''px'';
}
No ha probado el código.
La respuesta de Alciende no funcionó para mí en Safari por el motivo que sea, pero sí después de una pequeña modificación:
function textAreaAdjust(o) {
o.style.height = "1px";
setTimeout(function() {
o.style.height = (o.scrollHeight)+"px";
}, 1);
}
Espero que esto ayude a alguien
No creo que haya ninguna forma de obtener ancho de texto en fuentes de ancho variable , especialmente en javascript.
La única forma en que puedo pensar es crear un elemento oculto que tenga ancho variable establecido por css, poner texto en su innerHTML y obtener el ancho de ese elemento. Por lo tanto, es posible que pueda aplicar este método para hacer frente al problema de tamaño automático del área de texto.
Puede lograr esto utilizando un span y un área de texto.
Tienes que actualizar el lapso con el texto en textarea cada vez que se cambia el texto. A continuación, establezca el ancho y alto de css del área de texto en la propiedad clientWidth y clientHeight del tramo.
P.ej:
.textArea {
border: #a9a9a9 1px solid;
overflow: hidden;
width: expression( document.getElementById("spnHidden").clientWidth );
height: expression( document.getElementById("spnHidden").clientHeight );
}
Se implementó una solución jquery y el código fuente está disponible en github en: https://github.com/jackmoore/autosize .
También puedes probar el atributo contenteditable en una p o div normal. No es realmente un área de textarea pero cambiará el tamaño automáticamente sin script.
<!DOCTYPE html>
<style>
.divtext {
border: ridge 2px;
padding: 5px;
width: 20em;
min-height: 5em;
overflow: auto;
}
</style>
<div class="divtext" contentEditable>Hello World</div>
Un método es hacerlo sin JavaScript y esto es algo como esto:
<textarea style="overflow: visible" />
Usa esta función:
function adjustHeight(el){
el.style.height = (el.scrollHeight > el.clientHeight) ? (el.scrollHeight)+"px" : "60px";
}
Usa este html:
<textarea onkeyup="adjustHeight(this)"></textarea>
Y finalmente usa este CSS:
textarea {
min-height: 60px;
overflow-y: auto;
word-wrap:break-word
}
La solución simplemente es dejar que la barra de desplazamiento parezca detectar que la altura necesita ajustarse, y siempre que la barra de desplazamiento aparezca en su área de texto, ajusta la altura tanto como para ocultar la barra de desplazamiento nuevamente.
Puede verificar la altura del contenido configurando 1px y luego leyendo la propiedad scrollHeight :
function textAreaAdjust(o) {
o.style.height = "1px";
o.style.height = (25+o.scrollHeight)+"px";
}
<textarea onkeyup="textAreaAdjust(this)" style="overflow:hidden"></textarea>
Funciona bajo Firefox 3, IE 7, Safari, Opera y Chrome.