Wysokość textarea nie pasuje do wierszy w Firefox

Question

Atrybut textarea o wartości rows nie pasuje do liczby linii w Firefoksie. Na przykład:

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

Przykład: http://jsfiddle.net/Z7zXs/6/

Jak mogę rozwiązać ten problem? Obszar tekstowy powinien wyświetlać tylko 4 wiersze (zamiast 5) dla rows=4.

Answer 1

Firefox zawsze dodaje dodatkową linię po polu tekstowym. Jeśli chcesz go mieć stałą wysokość, należy użyć CSS, np .:

textarea { 
    height: 5em; 
} 

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

EDIT: Można również używać rozszerzenia @-moz-document url-prefix CSS kierować tylko przeglądarkę Firefox. Przykład

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

Answer 2

można ustalić wysokość przy użyciu JavaScript (lub dysk kod wysokości 4x1.2 = 4.8em).

Przykład (JQuery) rozwiązać problem dla każdego pola tekstowego:

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

Wartość właściwości CSS line-height równa wysokości każdej linii („rzędzie”). Tak więc, po zdefiniowaniu row, ten kod ustali wysokość.

Gdy atrybut rows nie jest ustawiony, kod będzie wyglądał domyślnie (.prop("rows")).

Answer 3

miałem ten sam problem raz i nie mogłem użyć CSS, więc JavaScript to jedyny sposób: oto MooTools i jQuery sposobów, aby to zrobić:

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

będzie sprawdzić, czy przeglądarka Firefox, jeśli tak jest, to sprawdzić, czy wiersze zostały już poprawione, a jeśli nie będą się stała.

Answer 4

Istnieje wiele odpowiedzi, ale nie nadaje się do mnie:

• reguły CSS (height: 5em;) nie jest elastyczne enoutgh ponieważ całkowicie zastępuje rows atrybutu
• I don'n chcę użyć JavaScript

Istnieje "bug": TEXTAREA incorrectly applying ROWS= and COLS=

Więc tutaj jest mój sol ution:

FF dodaje wysokość do pola TextArea, aby zarezerwować miejsce na paski przewijania.

nie muszę poziomego paska przewijania, więc pomaga w ustalaniu problem: Poniższa reguła CSS może być dodawany do pola tekstowego:

overflow-x: hidden; 

Here is example. Działa nawet z rows=1.