textareaの高さがFirefoxの行と一致しません

Question

textareaの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/

EDIT： また、唯一のFirefoxブラウザをターゲットに@-moz-document url-prefix CSSの拡張機能を使用することができます。例

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

Answer 2

あなたのJavaScript（またはハードコード4x1.2 = 4.8emの高さ）を使用して高さを修正することができます。

例（jQueryの）、各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); 
}); 

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の方法だ：JavaScriptが唯一の方法であるので、

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

ブラウザは、Firefoxであればそれはそれであれば、彼らは固定されますされていない場合、それは行はすでに修正されているかどうかをチェックし、ます、チェックします。

Answer 4

回答の多くがあるが、私にとっては適していませんでした：それは完全にrows属性

をオーバーライドし、私はJavaScriptを使用したいdon'nので

• CSSルール（height: 5em;は）柔軟enoutghではありません

"バグ" があります：TEXTAREA incorrectly applying ROWS= and COLS=

だからここに私のゾルでありますØ：

FFは、スクロールバーの場所を予約するためにTextAreaに高さを追加します。それは問題の固定に役立ちますので、私は、水平スクロールバーを必要としない

：次のCSSルールでは、テキストエリアに追加することができます。

overflow-x: hidden; 

Here is example。これはrows=1でも有効です。