web-dev-qa-db-ja.com

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

Textareaのrows属性は、Firefoxの行数と一致しません。例えば：

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

例： http://jsfiddle.net/Z7zXs/6/

この問題を修正するにはどうすればよいですか？ textareaは、rows=4に対して（5行ではなく）4行のみを表示する必要があります。

htmlfirefoxtextarea
40
user669677

Firefoxは常にテキストフィールドの後に余分な行を追加します。一定の高さにしたい場合は、CSSを使用します。例：

textarea {
    height: 5em;
}

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

EDIT：@-moz-document url-prefix FirefoxブラウザーのみをターゲットとするCSS拡張。例

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

たくさんの答えがありますが、私には向いていませんでした。

  • CSSルール（height: 5em;）は、rows属性を完全にオーバーライドするため、柔軟ではありません
  • JavaScriptを使いたくありません

「バグ」があります： TEXTAREAはROWS =およびCOLS =を誤って適用しています

だからここに私の解決策があります：

FFはTextAreaに高さを追加して、スクロールバーの場所を予約します。

水平スクロールバーは必要ないので、問題の修正に役立ちます。次のCSSルールをtextareaに追加できます。

overflow-x: hidden;

ここに例があります 。 rows=1でも動作します。

66
Serg

JavaScriptを使用して高さを修正できます（または_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")）を確認します。

2
Rob W

私は同じ問題を一度抱えており、CSSを使用できませんでしたので、JavaScriptが唯一の方法です：これを行うMootoolsとjQueryの方法は次のとおりです：

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

ブラウザがFirefoxであるかどうかを確認し、Firefoxである場合は、行がすでに修正されているかどうかを確認し、そうでない場合は修正されます。

0
Stephan Wagner