L'altezza dell'area di testo non corrisponde alle righe in Firefox

Question

L'attributo rows dell'area di testo non corrisponde al numero di righe in Firefox. Per esempio:

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

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

Come posso risolvere questo problema? La textarea dovrebbe visualizzare solo 4 righe (anziché 5) per rows=4.

Answer 1

Firefox aggiunge sempre una riga aggiuntiva dopo il campo di testo. Se si desidera avere un'altezza costante, usare i CSS, per es .:

textarea { 
    height: 5em; 
} 

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

EDIT: È anche possibile utilizzare l'estensione @-moz-document url-prefix CSS di indirizzare solo il browser Firefox. Esempio

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

Answer 2

È possibile correggere l'altezza utilizzando JavaScript (o hard-code un'altezza di 4x1.2 = 4.8em).

Esempio (JQuery), risolvere il problema per ogni area di testo:

$("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); 
}); 

Il valore della proprietà CSS line-height uguale l'altezza di ogni riga ("riga"). Quindi, quando hai definito row, questo codice risolverà l'altezza.

Quando l'attributo rows non è impostato, il codice avrà uno sguardo al valore di default (.prop("rows")).

Answer 3

che ho avuto lo stesso problema una volta e non ho potuto usare i CSS, in modo da JavaScript è l'unico modo: Ecco i modi Mootools e jQuery per fare questo:

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); 
     } 
    }); 
} 
}); 

si verificherà se il browser è Firefox, se lo è, si verificherà se le righe sono state già corretto, e se non si otterranno fisso.

Answer 4

Ci sono molte risposte, ma non era adatto per me:

• regola CSS (height: 5em;) non è enoutgh flessibile perché ignora completamente rows attributo
• E io don'n voglio usare JavaScript

C'è un "bug": TEXTAREA incorrectly applying ROWS= and COLS=

Così qui è il mio sol ution:

FF aggiunge altezza a TextArea per riservare le barre di scorrimento.

Non ho bisogno di barra di scorrimento orizzontale in modo che aiuta con la correzione del problema: seguente regola CSS possono essere aggiunti alla textarea:

overflow-x: hidden; 

Here is example. Funziona anche con rows=1.