텍스트 영역의 높이가 Firefox의 행과 일치하지 않습니다.

Question

텍스트 영역의 rows 속성이 Firefox의 행 수와 일치하지 않습니다. 예를 들어 :

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

예

:

어떻게이 문제를 해결할 수 http://jsfiddle.net/Z7zXs/6/? 텍스트 영역은 rows=4에 대해 4 행 (5 대신) 만 표시해야합니다.

Answer 1

Firefox는 텍스트 필드 뒤에 항상 추가 행을 추가합니다. 당신이 원하는 경우 일정한 높이를 사용 CSS, 예컨대을 :이하는

textarea { 
    height: 5em; 
} 

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

편집 : 당신은 또한 단지 파이어 폭스 브라우저를 대상으로 @-moz-document url-prefix CSS 확장을 사용할 수 있습니다. 예

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

Answer 2

당신은 자바 스크립트 (또는 하드 코드 4x1.2 = 4.8em의 높이)를 사용하여 높이를 수정할 수 있습니다.

예 (JQuery와)는 각 텍스트 영역에 대한 문제를 해결 :

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

line-height CSS 속성의 값은 각각의 행 ("행")의 높이는 같다. 따라서 row을 정의하면이 코드가 높이를 고정합니다.

rows 속성을 설정하지 않으면 코드의 기본값 (.prop("rows"))이 표시됩니다.

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

다음은이 작업을 수행 할 수있는 Mootools의와 jQuery를 가지이다 : 자바 스크립트 유일한 방법입니다, 그래서

Answer 3

내가 한 번 같은 문제를 했어 그리고 난 CSS를 사용하지 수 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); 
     } 
    }); 
} 
}); 

브라우저가 파이어 폭스의 경우 그것은이 경우가 고정 얻을 것이다되지 않은 경우,이 행이 이미 수정이 있는지 확인하고, 것입니다, 확인합니다.

Answer 4

이 답변이 많이 있지만 나를 위해 적합하지 않았다 : 완전히 rows 속성

을 무시하고 내가 자바 스크립트를 사용할 don'n 때문에

• CSS 규칙 (height: 5em;)는 유연한 enoutgh 아니다

는 "버그"가있다 : 그래서 여기 TEXTAREA incorrectly applying ROWS= and COLS=

내 졸인은 : 012 :

FF는 스크롤 영역의 위치를 ​​예약하기 위해 TextArea에 높이를 추가합니다.

가 문제 해결에 도움이 그래서 내가 가로 스크롤 막대가 필요하지 않습니다 : 텍스트 영역에 추가 할 수있는 다음과 같은 CSS 규칙을 :

overflow-x: hidden; 

Here is example. rows=1에서도 작동합니다.