Chiều cao của vùng văn bản không khớp với các hàng trong Firefox

Question

Thuộc tính rows của văn bản không khớp với số dòng trong Firefox. Ví dụ:

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

Ví dụ: http://jsfiddle.net/Z7zXs/6/

Làm thế nào tôi có thể khắc phục vấn đề này? Textarea chỉ hiển thị 4 dòng (thay vì 5) cho rows=4.

Answer 1

Firefox luôn thêm dòng bổ sung sau trường văn bản. Nếu bạn muốn nó có một chiều cao liên tục, sử dụng CSS, ví dụ .:

textarea { 
    height: 5em; 
} 

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

EDIT: Bạn cũng có thể sử dụng phần mở rộng @-moz-document url-prefix CSS để nhắm mục tiêu chỉ trình duyệt Firefox. Ví dụ

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

Answer 2

Bạn có thể sửa chiều cao bằng cách sử dụng JavaScript (hoặc mã cứng có chiều cao 4x1.2 = 4.8em).

Ví dụ (JQuery), khắc phục vấn đề cho mỗi textarea:

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

Giá trị của line-height thuộc tính CSS bằng với chiều cao của mỗi dòng ("hàng"). Vì vậy, khi bạn đã xác định row, mã này sẽ sửa chiều cao.

Khi thuộc tính rows không được đặt, mã sẽ xem xét giá trị mặc định (.prop("rows")).

Answer 3

Tôi đã có cùng một vấn đề một lần và tôi không thể sử dụng CSS, vì vậy Javascript là cách duy nhất: Đây là cách Mootools và jQuery để làm điều này:

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

Nó sẽ kiểm tra xem trình duyệt có phải là firefox không, nếu có, nó sẽ kiểm tra xem các hàng đã được sửa chưa và nếu không chúng sẽ được sửa.

Answer 4

Có nhiều câu trả lời nhưng không phù hợp với tôi:

• quy tắc CSS (height: 5em;) không phải là enoutgh linh hoạt bởi vì nó hoàn toàn ghi đè rows thuộc tính
• Và tôi don'n muốn sử dụng Javascript

có một "lỗi": TEXTAREA incorrectly applying ROWS= and COLS=

Vì vậy, đây là sol của tôi ution:

FF thêm chiều cao vào TextArea để đặt trước vị trí cho thanh cuộn.

Tôi không cần thanh cuộn ngang để nó giúp với khắc phục sự cố: theo quy tắc css có thể được thêm vào textarea:

overflow-x: hidden; 

Here is example. Nó hoạt động ngay cả với rows=1.