html - para - La altura de textarea no coincide con las filas en Firefox

textarea html value

Question

El atributo de rows de textarea no coincide con el número de líneas en Firefox. Por ejemplo:

<textarea rows=4 cols=40>
1
2
3
4
this line is visible in FF
</textarea>

Ejemplo: http://jsfiddle.net/Z7zXs/6/

¿Cómo puedo solucionar este problema? El área de texto solo debe mostrar 4 líneas (en lugar de 5) para rows=4 .

Answer 1

Firefox siempre agrega una línea adicional después del campo de texto. Si desea que tenga una altura constante, use CSS, por ejemplo:

textarea {
height: 5em;
}

http://jsfiddle.net/Z7zXs/7/

EDITAR: También puede usar la extensión CSS @-moz-document url-prefix para orientar solo al navegador Firefox. Ejemplo

@-moz-document url-prefix() {
textarea {
height: 5em;
}
}

Answer 2

Hay muchas respuestas pero no era adecuado para mí:

• La regla de CSS ( height: 5em; ) no es flexible enoutgh porque anula completamente el atributo de rows
• Y no quiero usar JavaScript

Hay un "error": TEXTAREA aplica incorrectamente ROWS = y COLS =

Así que aquí está mi solución:

FF agrega altura a TextArea para reservar lugar para barras de desplazamiento.

No necesito una barra de desplazamiento horizontal, así que ayuda a solucionar el problema: la siguiente regla CSS se puede agregar a textarea:

overflow-x: hidden;

Aquí hay un ejemplo . Funciona incluso con rows=1 .

Answer 3

Puede corregir la altura usando JavaScript (o una altura de 4x1.2 = 4.8em ).

Ejemplo (JQuery), soluciona el problema para cada área de texto:

$("textarea").each(function(){
var lineHeight = parseFloat($(this).css("line-height"));
var lines = $(this).attr("rows")*1 || $(this).prop("rows")*1;
$(this).css("height", lines*lineHeight);
});

El valor de la propiedad CSS de altura de línea es igual a la altura de cada línea ("fila"). Entonces, cuando haya definido la row , este código fijará la altura.

Cuando el atributo de rows no está establecido, el código tendrá un vistazo al valor predeterminado ( .prop("rows") ).

Answer 4

Tuve el mismo problema una vez y no pude usar CSS, por lo que JavaScript es la única manera: aquí están las maneras de Mootools y jQuery de hacer esto:

Mootools:

window.addEvent(''domready'', function() {
if (Browser.firefox) {
$$(''textarea[rows]'').each(function(el) {
if (!el.retrieve(''ffRowsFixed'')) {
var rows = el.get(''rows'').toInt();
if (rows > 1) el.set(''rows'', (rows - 1));
el.store(''ffRowsFixed'', true);
}
});
}
});

jQuery:

$(document).ready(function() {
if ($.browser.mozilla) {
$(''textarea[rows]'').each(function(i, el) {
if (!$(el).data(''ffRowsFixed'')) {
var rows = parseInt($(el).attr(''rows''));
if (rows > 1) {
$(el).attr(''rows'', (rows - 1));
}
$(el).data(''ffRowsFixed'', true);
}
});
}
});

Verificará si el navegador es Firefox, si lo está, verificará si las filas ya se han corregido, y si no, se arreglarán.